WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adjusting flexible width in twentyeleven (7 posts)

  1. mattshepherd
    Member
    Posted 1 year ago #

    I've got the twentyeleven theme working pretty much how I want it on full-screen computers, but I'm having issues with the iPad, where either the "main" or "content" IDs aren't behaving as I'd like (resizing to only a fraction of the banner width to the left).

    Where in the CSS would I change these? I'm tempted to whack away at #content, but some guidance as to how flexible-width actually works would be appreciated so that I can understand its function as opposed to just plugging in values until I get something I like and possibly irrevocably breaking it on other devices.

    I am currently using a child theme and do not need to be told about child themes.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. mattshepherd
    Member
    Posted 1 year ago #

    Gave it a shot; I'm afraid that's a bit outside the scope of where I'm competent enough to be effective.

    If you (or somebody) wouldn't mind answering the question asked, where in the CSS is the flexible-width controlled?

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    make sure you don't have any fixed width elements;

    the theme is normally resizing nicely on ipads.

    for any more detailed suggestions, please post a link to your site.

  5. mattshepherd
    Member
    Posted 1 year ago #

    Gaah, I should have done that in the first place, sorry.

    http://vegestrie.shep.ca

    I've been trying to read up, and would the site-title and header images be part of the problem? They (the header image and the site-title image) are set sizes.

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    possibly remove the fixed width of #site-title; add background-size: 90%;

    and optionally add:

    @media (max-width:650px) {
      #site-title {height:50px;}
    }

    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    (only tested with reducing the browser width in FF16; not tested with older browser such as IE8 and lower)

  7. mattshepherd
    Member
    Posted 1 year ago #

    Did the job wonderfully, alchymyth, thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic