WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 2011 Theme -- css fix for mobile device? (5 posts)

  1. AsHerWorldTurns
    Member
    Posted 1 year ago #

    When I look at my website on an iPhone, a few things are not displaying well. I'm wondering how I can adjust CSS to fix these issues. (I'm using the Twenty Eleven theme.) Right now I have this code in the CSS of my Child Theme, found on this site:

    /* =Responsive Structure for narrow screens
    * to keep min width and sidebar
    -------------------------------------------- */
    @media (max-width: 800px) {
         #page {
           min-width: 500px;
             }
    /* keep the sidebar - for right sidebar */
        .right-sidebar #main #content {
            margin: 0 29% 0 1%;
            width: 70%;
        }
        .right-sidebar #main #secondary {
            float: right;
            margin: 0 1% 0 1%;
            width: 24%;
        }
    /* keep the sidebar - for left sidebar */
        .left-sidebar #main #content {
            margin: 0 1% 0 29%;
            width: 70%;
        }
        .left-sidebar #main #secondary {
            float: right;
            margin: 0 -1% 0 2%;
            width: 24%;
        }
    /* correction for 'showcase' template */
        .page-template-showcase-php #main #primary.showcase {
            float: right;
            margin: 0 2% 0 2%;
            width: 96%;
        }
        .page-template-showcase-php #main #primary.showcase #content {
            margin: 0 6% 0 6%;
            width: 88%;
        }
        .page-template-showcase-php section.recent-posts {
            float: right;
            margin-right: 0pt;
            margin-left: 31%;
            width: 69%;
        }
        .page-template-showcase-php #main .widget-area {
            float: left;
            margin-right: -22.15%;
            margin-left: 0pt;
            width: 22.15%;
        }
    /* correction for singular posts/pages without sidebar */
        .singular #main #content {
            margin: 0 8% 0 8%;
            width: 84%;
        }
    /* keep floating footer widgets side-by-side at this size */
         #colophon #supplementary .widget-area {
              float: left;
              margin-right: 1%;
              width: 32%;
         }
    }
    
    /*to keep image alignment in narrow browsers*/
    @media (max-width: 650px) {
      .alignleft { float: left; }
      .alignright { float: right; }
    }

    Here is what I'd like to fix:

    1) On an iPhone, the width of my site is reduced -- but there is blank space on the right. I'd like to expand the width so it takes over this blank space. (There is a lot of empty space on the right hand side of the homepage, but it's not as bad on the single post pages -- in both cases, I'd still like the content to take over as much of that empty space as possible.)

    2) This is perhaps related to the first issue: In the right sidebar, the image and subscribe bar extend out awkwardly when viewed on a mobile device. Is there a way to get them to shrink appropriately on a mobile device? Would that fix my margin issues and the blank space on the right?

    3) On the homepage, the Featured Content Slider works fine, but it overlaps the top of the right sidebar. Is there a way to either make the Featured Content Slider shrink appropriately so it's in-line with the primary content, OR to push the right hand column so it's below the Featured Content Slider when viewed on a mobile device?

    4) Lastly, the search bar covers up some of my header. It's not terrible, but if there's a way to move the search bar down in line with the menu (like it is when you view my site on a laptop / non-mobile device).

    Any help would be greatly appreciated!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    1) In your Child Theme's style.css file, add this;

    @media only screen and (max-width: 480px) {
    
     #myGallery {
      width: 100%;
     }
    
    }
  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    ideally you should work with a child theme; http://codex.wordpress.org/Child_Themes
    or at least make any css adjustments within a custom css plugin, for instance the custom css of 'jetpack'.

    building on the styles of my article: 'Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices':

    1.
    add this to the 800px media query:

    body { padding: 0px; }

    2.
    to shrink any image in the sidebar; add this to the 800px media query:

    #secondary .widget img { max-width: 95.5%!important; height: auto; }

    for the 'subscribe' input, add this to the 800px media query:

    #secondary .widget input { max-width: 95.5%!important; }

    3.
    the slider might work in mobile devices (I can't check that) but does not work in narrow FF17 browser. search for a real responsive slider.

    until then, for non-perfect patch, you could add this before the media queries:

    #featured, #myGallery { max-width: 100%!important; }
    .slideElement { max-width: 100%!important; background-size: 100%; }

    this to the 800px query:

    #featured { max-width:68%!important; }
      #myGallery, .slideElement { height: 350px!important; }

    and this to the 650px query:

    #myGallery, .slideElement { height: 275px!important; }

    4.
    can you post a direct link to an example single post? what I could see, they seem to adjust ok in a narrow FF17 browser; no idea about mobile devices.

    5.
    to keep the search bar in the menu bar, add under the 650px media query:

    #branding #searchform { top: auto!important; bottom: -30px!important; }

    alternatively, to keep the searchbar in the header and to stretch the menu over the full width, add this under the 650px media query:

    #branding .only-search + #access div { padding-right: 5px; }

    PS:
    add this to the 800px @media section, to correct for some edits you have made to the styles:

    #primary { width: 100%; margin-right: -28.4%; }

    for the sidebar image, you might also need to add this before the @media styles:

    #secondary .widget img { max-width: 95.5%!important; height: auto; }
  4. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Many thanks Alchymyth!! It's looking a lot better. Also, I figured out the issue with the horizontal photos and it's all fixed now (I had to align them like I did the vertical images; that way the mobile device recognized them and resized them accordingly).

    I have one remaining concern: Is there code that will adjust the text size so that it all fits in better? Right now it's hyphenating a lot of the words in order to fit the space, which looks messy. I'd prefer that the text shrinks appropriately / proportionally when viewed on a mobile device, if that's possible. (When I look at other blogs on my iPhone, their text shrinks down to allow the width of the whole site, if that makes sense.)

    One last thing: I really like the search bar in the menu bar (thank you for that code!). I'm wondering if there's a way to then shift up the last line of the menu, so that it's over two lines instead of three? That would make it look more compact / use up the space better in the menu bar.

    Again, major thanks for your help!!

  5. AsHerWorldTurns
    Member
    Posted 1 year ago #

    I am so excited right now!!

    After continuing to tweak the code on my own, I found the exact fix I was looking for. I added this to the bottom of my CSS (child theme):

    /* =Responsive Structure for narrow screens
    * to keep min width and sidebar
    -------------------------------------------- */
    #featured, #myGallery { max-width: 100%!important; }
    .slideElement { max-width: 100%!important; background-size: 100%; }
    @media (max-width: 1000pxbody { padding: 0px; }) {
         #page {
           min-width: 1000px;
             }
    /* keep the sidebar - for right sidebar */
        .right-sidebar #main #content {
            margin: 0 29% 0 1%;
            width: 100%;
         }
        .right-sidebar #main #secondary {
            float: right;
            margin: 0 1% 0 1%;
            width: 24%;
        }
    #branding #searchform { top: auto!important; bottom: -30px!important; }

    That did the following things: fix my margins for mobile device viewing (so it looks like my site would on a laptop), adjust the featured content gallery size to fit proportionally, move the search bar in line with the menu, and (most importantly) show 100% of my site when viewed on a mobile device. I discovered that the key to showing 100% was to set the site width to 1000px (which is the size of my particular site).

    Thanks for your help alchymyth, and I hope this might assist anyone else looking for similar code.

Topic Closed

This topic has been closed to new replies.

About this Topic