Skip to content
Advertisement

how to structure html to take advantage of media queries [closed]

I’m trying to design a registration page that will work on both a desktop and mobile phone. To register I need 6 items. I would like to have on the desktop 3 lines with 2 items on each line. On mobile I want to create 2 groups each with 3 lines, 1 item on each line. I will want to add back and next button for the mobile site to go between the two groups.

I can do this by creating two different sets of html (see snippet) but would like to see if there’s a way to do this with one set of html and then just media quires to transform. I’m ok with changing the html but I want to achieve the indicated result.

JavaScript
JavaScript
JavaScript

Advertisement

Answer

I may be missing something vital but it seem You can keep the layout as you have and simply hide one form and show the other depending on the @media screen and (max-width: XXXpx) where XXX is where you want your breakpoints to be.

Let’s say you decide to go for 600px of width:

JavaScript

If you want to simplify the layout, but do not mind changing pretty much everything else, you can try hiding and showing only what you need in that form.

One example of how you might be able to do that would be the following:

JavaScript
JavaScript
JavaScript

Of course you can add as much style as you want, this is only a simple layout suggestion, but again, there are multiple ways you can go around tackling this issue

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement