Search code examples
htmlcssmedia-queries

How to use media-queries to change the html

I'm just reading about media queries for the first time, so that I can make my web page look different on a smartphone.

I see how I can use them to apply different styles to the web page, e.g.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
            color: green; 
         }

}

But how do I use them to change the HTML? For example, if I want to add a line break between two images only if the page is being viewed on a smartphone.

So on a laptop, the images would appear side-by-side and on the smartphone, one would be above the other.

Many thanks.

Solution

  • There are different ways to achieve what you wanted.

    Like you will design your website using mobile-first or desktop-first approach etc.

    You can try to read this link about RWD

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    and to know more about RWD read this link

    http://blog.froont.com/9-basic-principles-of-responsive-web-design/

    Hope this helps.