Search code examples
phphtmlcssmobilealignment

Use different HTML code for desktop and mobile version

On my website I am trying to change how the divs look depending on the screen size. I already have a css file that deals with that. When I use the mobile version the titles in this div are like that : enter image description here So, you can see that the title does not fit in one line.

The code is :

<div class="row"> 
              <div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/>DATA VISUALISATION ENGINEER</h3> 
                  <p><b>Datorama</b></p> 
                  <p>•  Digital data analysis and automation</p> 
                  <p>•  User-Interface interaction improvement</p> 
                  <p>•  Visualisation of the insights </p></section> 
              </div>

So, I changed one line of the code by adding the <br> :

<div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/> <br>DATA VISUALISATION ENGINEER</h3>

So, the mobile version is fine. But when I use this, my desktop version is like that: enter image description here

but it used to be like that :

enter image description here

My question is, how can I have a different version of html code depending on the screen size? I have the css code but it is going to be hard to set it up. Now I just have to add a <br>. Is there a way to add like an (IF desktop version, checking the css file --> html code version 1, else --> html code version 2).

Solution

  • You can find soemthing here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    // your mobile css version
@media (min-width: 700px) { 
    // your desktop css version
}