How can I increase the width of the entire site on the mobile version? This includes all sections such as header, homepage, single post, and sidebar content. Here is an example of my current site vs a wide site:
My Current Site: http://i.imgur.com/nEQRQI1.jpg
Wider Site: http://i.imgur.com/1UEUdqR.jpg
To resolve this issue, you can add the following code to the style.css file:
@media (max-width:767px) {
body {
padding-left: 10px;
padding-right: 10px
}
}
Hope this helps !
Ok, the code does create the width I want, but it creates two issues.
1) The mobile screen now slides off the page easily.
2) When rotating the mobile screen, the page zooms in too closely.
I think these usually happen on mobile pages when elements too wide for the screen and break the page. I double checked this, when removing that code these issues don’t happen. It occurs also on the similar site I showed earlier that was edited for mobile width. Here are screenshots:
My Site Page Sliding Off:
Scrolling right: http://i.imgur.com/VC6PDH1.jpg
Scrolling left: http://i.imgur.com/1Uz3alb.jpg
Other Site Page Sliding Off:
Scrolling right: http://i.imgur.com/8j117k1.jpg
Scrolling left: http://i.imgur.com/1Wn7OfG.jpg
Rotation Zoom Issue:
My Site: http://i.imgur.com/R1lMXUe.jpg
Other site: http://i.imgur.com/AQ86T5P.jpg
Please login or Register to submit your answer