CoopDaddio CoopDaddio - 6 months ago 8
HTML Question

CSS different properties on different screen size

When the screen size becomes a certain size (560px), I would like the html code to be edited slightly.

At any size > 560px:

<div id = "div"><span class = "span">TextRightHere</span></div>


At any size < 560px:

<div id = "div"><span class = "span">Text<br>Right<br>Here</span></div>


How am I able to edit this line of HTML through my CSS file?

Answer

Change the code to the following:

<div id = "div"><span class = "span">Text<br>Right<br>Here</span></div>

Then, use the following css code:

#div br{display:none;}
@media screen and (min-width:560px){
    #div br{display:none;}
}@media screen and (max-width:560px){
    #div br{display:inline;}
}
Comments