WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve mobile content width (7 posts)

  1. mmmjoe
    Member
    Posted 1 year ago #

    Hey Guys,

    im using twenty twelve and a child theme, I was wondering if anyone had any ideas how to get around this http://snag.gy/G7eVh.jpg and force the page content width to extend on mobile. I know its not ideal with with theme im using...

    Thanks!

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    it seems that the header banner is added with a fixed width, or not formatted to react to the browser width.

    please try working with a browser inspection tool to find the cause;

    or post a link to your site to allow someone here to inspect your site nd to make some suggestions ...

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding this:

    .site-content {
     min-width: 846px;
    }
  4. sonai
    Member
    Posted 1 year ago #

    try this,

    .site-content {
    width: 90%;
    margin:0 5%;
    }

  5. mmmjoe
    Member
    Posted 1 year ago #

    Thanks for the replies!

    Sorry alchymyth it's allaboutpromo.com/blog and the header contains a slider which has the fixed width...

    That seemed to work Andrew, though if possible i would like the sidebar to display to the right still of the page content still, i changed the min-width to slightly than less than 846 though its still floating left underneath the page...?

    Thanks everyone!

  6. alchymyth
    Forum Moderator
    Posted 1 year ago #

    like the sidebar to display to the right still of the page content

    I would try and add something like this to the end of style.css of the child theme:

    body .site { min-width: 900px; }
    .site-content { float: left; width: 65.10%; }
    body.template-front-page .site-content,
    body.single-attachment .site-content,
    body.full-width .site-content { width: 100%; }
    .widget-area { float: right; width: 26.04%; }
  7. mmmjoe
    Member
    Posted 1 year ago #

    That worked prefectly,

    i just added

    #main { min-width: 900px; }

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic