Boxed layout in mobile viewport

rarch47 · March 2015

Hi there,

I have the boxed layout for my website so I can show background images using layouts. When viewing the website on a mobile phone I notice that there are quite obvious margins on the left and the right of the screen. I am just wondering if there is any way that I can reduce these margins so I can get back more of the horizontal screen space and lessen the amount of scrolling to view the content.

It is particularly obvious when rotating the smartphone into landscape view.

Albert · March 2015

Hi,

all you can do is increase wrapper width on mobile devices and this can be done within below css:

@media only screen and (max-width: 479px) { #Wrapper { width: 350px; } }

Thanks!

rarch47 · March 2015

Had to add an !important declaration for it to work - thanks for that!

Incidentally, there would not be anyway to decrease the side padding in mobile display? I am unsure of what div element to target. I want to make use of the extra white space that now appears and stretch out the content more horizontally.

Wish there was a developer console tool on a mobile phone.

Boxed layout in mobile viewport

Comments

This website uses cookies