Support » Fixing WordPress » Changing the minimum width of Twenty Eleven.

  • Resolved ransom1337

    (@ransom1337)


    Hello,

    I’m keeping the responsive design of Twenty Eleven, but I want it to respond all the way down to 320px width so that it displays at the correct size on iPhones. When I’m testing it in-browser, it only seems to respond down to about 460px width, yet I can’t seem to find a single min-width property for this in the CSS anywhere.

    Can anyone please tell me where I can change this?

    Thanks.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Try a mobile plugin like the very popular wpTouch. A Pro version is available with excellent support for iOS devices.

    Thanks for the response.

    Is there not just a min-width property I can change?

    Widths in TwentyEleven use percentage. How would forcing a min width affect your site on a Mobile Browser?

    If it’s only shrinking to 460px width, that means that when a user opens the page on a mobile, it ‘zooms out’ to fit everything in. I’d like all my text to display at the sizes I’ve gone to the trouble of setting rather than making the user zoom in to read the blog.

    And to do that, it needs to respond down to 320px.

    TwentyEleven only uses percentages down to 460px, which is where it seems to have a minimum width attached to it, because it doesn’t go any smaller than that. Surely there’s a property somewhere I can change to alter this.

    TwentyEleven only uses percentages down to 460px

    Can you provide a link that notes this?

    I think that the default media view is landscape and not portrait and that is the issue?

    Just open any TwentyEleven-themed WordPress blog and shrink your browser down to a thin width. It only scales down to roughly 460px. I’m not sure if that’s the exact number.

    The landscape media view might be the issue. Where can I change that please?

    Just open any TwentyEleven-themed WordPress blog and shrink your browser down to a thin width. It only scales down to roughly 460px

    I am not seeing this..

    Try Rotating the device to landscape (sideways)or review device settings.

    You’re not seeing it, even on a desktop?

    WPyogi

    (@wpyogi)

    Forum Moderator

    Have you looked at the twentyeleven style.css file — at the end where the “responsive” code is?

    Yes I have. There’s no relevant min-width values that I can find.

    WPyogi

    (@wpyogi)

    Forum Moderator

    What is your site URL?

    http://bitofageek.com/

    You’ll have to login though as:
    username: demo
    password: demopassword

    Open it in a desktop browser and shrink the browser width to see what I mean. It stops at the 460px-ish mark, which is where I assumed a min-width property must have been set.

    WPyogi

    (@wpyogi)

    Forum Moderator

    You have a “coming soon” page on there — no login.

    You’re not seeing it, even on a desktop?

    There is a limit in each browser to how small a page can be re-sized, but it’s browser dependent, and is much smaller than 460px wide in major desktop browsers. (But this is re-sizing a page already loaded, which is not the same as loading a page based on device width..to test use a desktop WYSIWYG editor and open a page at say 640 wide and then re-size in browser)

    The @media CSS attempts to decide how to show the site on devices of differing widths, but is also device/OS/browser dependent.

    WPyogi: Login via /wp-admin.

    Seacoast: But my portfolio page responds down to 320px no problem in Firefox, and I’m testing this one in Firefox too, so it’s not a browser default issue.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Changing the minimum width of Twenty Eleven.’ is closed to new replies.