Reply To: [Solved] Width of div is not displaying at 100% on mobile/smaller screens

[Alan C]

Well the good news is this all looks pretty decent. What you would do from that point is put it all into a container with a max-width set to roughly 1300px (since that was around what you had everything at). That means the container will expand to that size if it can but not go over.

Then from there you can position everything around and use breakpoints to make sure it degrades gracefully. As for your image there with the leaves you have two options.

If you are going to want that full screen you would not constrain it to the aforementioned 1300px container but allow it to go to 100% and perhaps impose some sort of max height on it so you don’t end up with a monster image. Actually it might be better to get the image to a good aspect ratio and just let the browser handle that for you.

The second option would be to go ahead and constrain it and just deal with people having browsers over 1300px not getting the full width image experience.