WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
Div Not Fully Responsive in 320 x 480 (5 posts)

  1. EarlSnappy
    Member
    Posted 1 year ago #

    I've created my own divs (code below - child css) for blog page (index.php in child theme), but when in iPhone view and smaller views it isn't 100% responsive - it resizes, but not as far as it should like it does on the homepage - I need it to have the same width as the homepage content area does in all resolutions. I'm guessing I'm missing something obvious (I'm not a pro), any help much appreciated, thanks Earl

    #contentblog
    {
    padding: 2em 2em;
    border: 1px solid #acb288;
    border-radius:3px;
    -moz-border-radius:3px;
    width: 91%;
    max-width: 100%;
    }

    #primaryblog {
    float: left;
    width: 97%;
    padding-left: 15px;
    max-width: 100%;
    }

    I used the following as well in my child css, but I'm not sure if it's relevant to the problem (I'm not entirely sure what the .one-column does, I got it from a forum)
    /*Increase width of content*/
    .one-column #content {
    margin: 0 1.5% 0 1.5%;
    width: 97%;
    }

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It looks pretty good to me, but the CSS is not identical as the HTML is not either - the home page is using this:

    .singular #primary {
        margin: 0;
    }
    #primary {
        float: left;
        margin: 0 -26.4% 0 0;
        width: 100%;
    }

    The blog page this:

    #primaryblog {
        float: left;
        max-width: 100%;
        padding-left: 15px;
        width: auto;
    }

    So that looks like the padding-left is the likely difference?

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using Firebug (or equivalent) to look at this kind of thing? Only way to go :).

  4. EarlSnappy
    Member
    Posted 1 year ago #

    Hi WPyogi,

    I've used the inspect element, but haven't solved it, I think it's more about my knowledge of css (or lack of..) and what every element does especially 'responsive' declarations.

    I used the inspect element in firefox, and added a padding right, but, when I actually altered my css file it didn't mimic the changes shown.

    I will let you know 'when' I fix it how I did it, so will leave post unresolved for the moment, thanks, Earl

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Remove instances of width, but leave max-width.
    You can discuss this in CSS forums such as http://csscreator.com/forum

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic