Gabriel M
asked 7 years ago

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

2 Answers
DominicStaff
answered 7 years ago

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 !

Gabriel M
answered 7 years ago

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

Powered by DW Question & Answer Pro