CSS for Mobile Resizing ??

Here’s a code I’ve been messing around with…

@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.

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 only screen and (max-width: 768px)

-And below it, find this line:

@media only screen and (min-width: 768px)

-Change 768 in both lines of code to 700.
-Save! Menu fixed!

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%;
}

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 only screen and (max-width: 768px)

@media only screen and (min-width: 768px)

2. Replace 768 with 700. New codes will read:

@media only screen and (max-width: 700px)

@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 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.