WordPress.org

Ready to get started?Download WordPress

Forums

Tiny Forge
[resolved] Site content & sidebar width change breaks responsive? (3 posts)

  1. CliveH
    Member
    Posted 5 months ago #

    When I try to change (or even duplicate from the parent) the .site-content and .sidebar widths, my site becomes "non-responsive," i.e. it no longer resizes properly for small screens.

    (I'm using WP 3.8.1 and Tiny Forge 1.5.5 with child theme)

    I also changed the site width to 1060px following Tomas' tutorial.

    I'm putting in the following CSS in a child theme (using Jetpack plug in for custom CSS):

    /* 12.1 Minimum width of 600 pixels */
    @media screen and (min-width: 600px) {
    .site {
    max-width: 1060px;
    max-width: 75.714285714rem;
    }
    }

    .site-content {
    float: left;
    /*width: 75.104166667%;*/
    /* parent css width is 65.1... */
    /*width: 65.104166667;*/
    }

    .widget-area {
    float: right;
    /*width: 20.5%;*/
    /*parent css width is 30.5 */
    /*width: 30.5%;*/
    }

    If I use original width pair (65/30) or the new widths (75/20), the responsiveness breaks. If I leave the pairs commented out, the site works fine but with the parent widths.

    Any ideas?!!!

    Thanks, Clive

  2. CliveH
    Member
    Posted 5 months ago #

    I found my problem. I had a misplaced end bracket } in 12.1. The mistake even shows in the snippet I pasted above :(

    Problem resolved.

  3. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Good to hear. To be honest, I wrote that tutorial just looking at the code and I didn't have time yet to try it out.

    I assume it should work, but if you will find some roadblocks, please let me know ;)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.