I have two separate paragraphs, for a matter of aesthetics when it comes to layout, and I would like to concatenate them. I have given them a padding, to give them air, but I want that, from 960 px, those two paragraphs become one.
var parrafoUno = document.getElementById("firstParagraph").value;
var parrafoDos = document.getElementById("secondParagraph").value;
if ($(window).width() < 960) {
var parrafosUnidos = parrafoUno + parrafoDos;
};
.parrafosDivididos {
display: flex;
flex-flow: row nowrap;
align-items: baseline;
justify-content: center;
}
p {
font-size: 1.3em;
line-height: 1.8;
color: rgb(118, 133, 165);
text-align: justify;
padding: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parrafosDivididos">
<p id="firstParagraph">Esto es una prueba</p>
<p id="secondParagraph"> para ver si puedo concatenar dos párrafos</p>
</div>
How can I join them so that the complete sentence remains?
This is something that could be done without the need for JavaScript/jQuery, just using CSS and media queries.
The idea would be to keep your CSS styles, and add a media query that runs only when the page size is less than 960px. In that media query you would make it
.parrafosDivididos
not use Flexbox and paragraphs would beinline
instead of block by default. That way they would appear together as if they were a single paragraph.Here you can see an example of what it would look like (it may need some adjustment, but it's just to get the idea):
You would have to use the
.resize()
: The change event ofresize
is dispatched to the elementwindow
when the browser window resizes. With this it should work, when saying that you give them 'air' it is because you separate them by 70px, and to make it one, we only change the padding, that is done with the method.css()
, I hope it is what you request, any questions let me know.