Title: CSS for Mobile Resizing ?? Last modified: August 30, 2016 --- # CSS for Mobile Resizing ?? * [echavous](https://wordpress.org/support/users/echavous/) * (@echavous) * [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/) * Love the responsive design of this layout, but I’m disappointed that my iPad screen width is too narrow, causing the layout to display as mobile (little mobile menu instead of text menu, menu does not remain sticky to top, posts display above sidebar widgets instead of widgets showing up on the right, which creates a bunch of extra white space). Looks awkward. * When iPad is turned horizontally, the layout shows up just fine (like desktop version)… but holding the iPad regularly in portrait view shrinks everything down. * Can anyone recommend a little code to fix this? I’d like to force the posts/widgets to remain full width, force the menu not to switch to mobile, and force the menu to remain sticky (mobile menu does not). * Any help would be appreciated, thanks! Viewing 4 replies - 1 through 4 (of 4 total) * Thread Starter [echavous](https://wordpress.org/support/users/echavous/) * (@echavous) * [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/#post-6667999) * Here’s a code I’ve been messing around with… * > [@media](https://wordpress.org/support/users/media/) only screen > and (min- > device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ > div#primary { width: 75%; float:left; } div#secondary{ float:right !important; > width:25%; } } * When div#primary is set to 100%, the posts display at full width. When I update to this version — div#primary at 75% and div#secondary at 25% with a right float— the posts adapt and display (in iPad portrait mode) at 75% width, floated left. However the sidebar does not react. Want to force it to stay as a two-column layout. * I’m at [cactusandfog.com](http://cactusandfog.com). * Thread Starter [echavous](https://wordpress.org/support/users/echavous/) * (@echavous) * [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/#post-6668016) * Menu fixed! * Still working on forcing the two-column layout to maintain itself in iPad portrait. * If anyone else had similar issue with menu (want to maintain full, sticky navigation in iPad portrait mode, instead of mobile menu) here’s what worked for me: * -Open theme editor. -Find this line of code: * > [@media](https://wordpress.org/support/users/media/) only screen and (max-width: > 768px) * -And below it, find this line: * > [@media](https://wordpress.org/support/users/media/) only screen and (min-width: > 768px) * -Change **768** in both lines of code to **700**. -Save! Menu fixed! * Thread Starter [echavous](https://wordpress.org/support/users/echavous/) * (@echavous) * [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/#post-6668022) * Ok, by adding the following bit of code under the line **min-width: 700px** (* see previous post*), I am able to maintain the two-column layout at a smaller resolution (700px) on my desktop. For whatever reason, the code is not affecting iPad view. (It should, because iPad width is over 700px… I did try to lower this number again to 600px… works fine again on desktop, shows two-column view at even smaller resolution… but, still, no change to iPad’s single-column view). * Ideas?? * > div#primary { > float:left; width:67%; } div#secondary, #secondary-2, #secondary. > aside, #secondary-2 .aside, .secondary, .aside{ float:right !important; width: > 33%; } * Thread Starter [echavous](https://wordpress.org/support/users/echavous/) * (@echavous) * [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/#post-6668025) * Figured it out. Apparently it helped to detail my progress here… * Posting the solution, because there are a few archived threads in here that request answers to similar problems. * The following style.css update to Evolve theme will disable the forced mobile navigation menu (which is not sticky) and disable the forced single-column layout on iPad portrait screen. Previously there was no trouble with landscape view, but if you had issues with iPad landscape, this should solve those too. * **1. Search for these codes:** * > [@media](https://wordpress.org/support/users/media/) only screen and (max-width: > 768px) * > [@media](https://wordpress.org/support/users/media/) only screen and (min-width: > 768px) * **2. Replace 768 with 700. New codes will read:** * > [@media](https://wordpress.org/support/users/media/) only screen and (max-width: > 700px) * > [@media](https://wordpress.org/support/users/media/) only screen and (min-width: > 700px) * **Doing above will disable forced mobile navigation on iPad portrait view. * 3. You should be at the min-width line of code, still. If not, find it again: * > [@media](https://wordpress.org/support/users/media/) only screen and (min-width: > 700px){ * Add this code after the above line: * > #primary { > float:left; width:64% !important; padding:0 0 0 0px; } #secondary,# > secondary-2, #secondary .aside, #secondary-2 .aside, .secondary, .aside{ float: > right !important; width:36%; padding:0 0 0 0px; } * That will enable 2-column layout with a right-handed sidebar on iPad portrait view. If you want to change proportions, toggle 64% (for posts) and 36% (for sidebar). * Hope this saves somebody a few hours of work. Enjoy. Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘CSS for Mobile Resizing ??’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/evolve/4.3.7/screenshot.png) * evolve * [Support Threads](https://wordpress.org/support/theme/evolve/) * [Active Topics](https://wordpress.org/support/theme/evolve/active/) * [Unresolved Topics](https://wordpress.org/support/theme/evolve/unresolved/) * [Reviews](https://wordpress.org/support/theme/evolve/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [mobile](https://wordpress.org/support/topic-tag/mobile/) * 4 replies * 1 participant * Last reply from: [echavous](https://wordpress.org/support/users/echavous/) * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/css-for-mobile-resizing/#post-6668025) * Status: not resolved