WordPress.org

Forums

Twenty Thirteen
[resolved] Screen Width. (10 posts)

  1. Zigwolf
    Member
    Posted 1 year ago #

    Using TwentyThirteen.

    When the browser is maximized, the theme/website looks perfect.

    But when you minimize the browser, or view the website on an iPad or smartphone, the website is too big, and thus you only see part of it on the screen.

    Is there a way to keep it proportionate contingent upon what size screen you're using to view it?

  2. YajYolid
    Member
    Posted 1 year ago #

    It needs to make responsive so that it will look good if the visitor uses different devices.

  3. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    the website is too big

    Can you link to the site with this issue? Have you checked the theme's demo site to see whether the issue persists?

  4. Zigwolf
    Member
    Posted 1 year ago #

    Hello, Andrew.

    Here's the website: http://www.pinionpress.com.au

    With the other Twenty-themes, the website always stays proportionate to the size of the screen. The TwentyThirteen (because of the banner, I imagine) keeps its size regardless of screen width (e.g. minimizing the browser, looking at it on an tablet or smartphone).

    Thanks.

  5. Zigwolf
    Member
    Posted 1 year ago #

    Can you link to the site with this issue? Have you checked the theme's demo site to see whether the issue persists?

    Thanks for the theme's demo site. The demo remains proportionate when you resize the screen, or view it on a smartphone.

    I don't understand why it does that on the demo, but not on our site at http://www.pinionpress.com.au.

    As far as I can see, there are no options for it within the theme itself.

  6. CrouchingBruin
    Member
    Posted 1 year ago #

    Your site is behaving properly, why do you not think it is? The content container gets narrower, the sidebar collapses under the main content and the menu changes to a drop down menu.

    If you're referring to the text in your header image, the reason why the text (like site title and description) don't resize or shift is because the "text" is actually part of the image, it's not really text. If you look at the demo page, the site title is actually text in h1 & h2 tags. Images that are a background property don't resize. If you resize the demo page, you'll see that the header image remains the same size.

    If you go to your general settings page and fill in the site title and site description fields, you'll see that they will, in fact, respond properly (they just won't look as pretty as the text that's part of the header graphic).

  7. CrouchingBruin
    Member
    Posted 1 year ago #

    What you can try is setting this CSS rule either in a child theme or using a CSS Plugin:

    .site-header {
       background-size: contain;
    }

    What the background-size: contain; property setting will do is resize the image to fit in the container. However, you'll see that when the browser gets narrower, the image will get really thin such that there will be a lot of white space between it and the nav bar, and the site description will be almost illegible.

  8. Zigwolf
    Member
    Posted 1 year ago #

    Hey, CrouchingBruin, thanks for all your invaluable help. Very much appreciated. Cheers.

  9. CrouchingBruin
    Member
    Posted 1 year ago #

    Zigwolf, if you are interested in a solution, I just posted one in this thread. You'll need to create a child theme, but it's not that hard.

  10. Zigwolf
    Member
    Posted 1 year ago #

    Sorry for the belated reply -- finally got around to working on this.

    CrouchingBruin, you're a wizard! Thanks very much! Appreciated.

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic