Forum Replies Created

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter echavous

    (@echavous)

    Right on @neotechnomad, I’ll give that a try! Appreciate it.
    In the meantime, if any evolve users already know the attribution LMK.

    Thread Starter echavous

    (@echavous)

    Thanks, I’m adept with css and pretty sure I can figure out the php with a little tinkering… I just need to know the name/class/id/what have you for the items. Can’t find anything related to mobile-specific design aside from screen size and screen reader text options.

    I’ve been searching for the same CSS fix, and finally figured it out.

    Search your code for this line:

    #secondary a:hover, #secondary-2 a:hover

    You will see that padding is set to 5px — that’s what’s triggering the shift to the right when you hover over links/images in the #secondary (sidebar) area. Change 5px to 0px to stop your links from sliding around when hovered. This section of code should now look like this:

    #secondary a:hover, #secondary-2 a:hover {
    color:#7a9cad;
    text-decoration:none;
    padding-left:0px;
    }

    Hope this helps!

    Emily
    Cactus + Fog

    Thread Starter echavous

    (@echavous)

    Omg! Thanks Sean! I knew there was an easy fix… works just fine now.
    I’m a new WP user, recently migrated from Blogger.

    Sincerely appreciate the help. ??

    Thread Starter echavous

    (@echavous)

    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.

    Thread Starter echavous

    (@echavous)

    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

    (@echavous)

    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!

    Thread Starter echavous

    (@echavous)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)