Forums

Twenty Eleven footer widgets stack on iphone (7 posts)

  1. The_liz
    Member
    Posted 6 months ago #

    Making a twenty-eleven child theme here: http://www.m3musictherapy.com/

    It looks great except that on iphone and ipad, the footer widgets stack and display at full width- I didn't change the footer area code. How do I get them to line up in a row? clearly there is room... The CSS for them is all in percentages already and the content is only text.

    Thank you for any insights!

  2. alchymyth
    The Sweeper
    Posted 6 months ago #

    look into the 'responsive structure' style in the lower third of style.css, and see if you can find the responsible css styles.

    caused by this style in styl.css of the parent theme:

    /* No need to float footer widgets at this size */
    	#colophon #supplementary .widget-area {
    		float: none;
    		margin-right: 0;
    		width: auto;
    	}

    in your child theme, add something like this to style.css, into the '800px responsive' section:

    /* keep floating footer widgets at this size */
    	#colophon #supplementary .widget-area {
    		float: left;
    		width: 33%;
    	}

    (adjust width, and add margin if you need to.)

  3. The_liz
    Member
    Posted 6 months ago #

    Splendid! That worked like a charm.
    Of course the "responsive structure" hack was what fixed the sidebar in mobile browsers, got it from you in this post: http://wordpress.org/support/topic/sidebar-gone-on-frontpage-when-using-mobile?replies=27

    Thank you for a second fix! :)

  4. Katch22
    Member
    Posted 6 months ago #

    I've got two widgets in the footer on my site, used alchymyth's code but changed width to 50% and it works perfectly! Exactly what I needed!

    Plus I got here because of Liz's link on the other topic where you helped, so thanks 2 times! :P

  5. Lazarith
    Member
    Posted 5 months ago #

    Thank you very much for posting this solution to the 3 footer issue. I am having a similar issue with the pages in my menu, right under my header titled "Cheeky Mouth." This is occuring when I view the site on a mobile iOS or Android browser. Any suggestions on what to edit in my child theme?

    http://www.cheekymouth.com

  6. Lazarith
    Member
    Posted 5 months ago #

    Haaa, you are all awesome!!!

    @alchymyth: I used the code (in my child theme of course) you posted to the section where people were having issues with the sidebar in mobile browsers and poof... It worked!

    Thanks again!

  7. Lazarith
    Member
    Posted 5 months ago #

    Received info from Alycymyth on how to fix the issue with bringing the pages in my menu down just over the line below them. He provided the following code to paste into my child/style.css file and it worked!

    #access a {
    color: #eee;
    display: block;
    line-height: 1.25em; /*changed*/
    padding: 2em 2em 0; /*changed*/
    text-decoration: none;
    }

Reply

You must log in to post.

About this Topic