[resolved] FUll width home page/ masonry (6 posts)

  1. jessicaclark
    Posted 10 months ago #

    Hi there,
    I have been using my quark child theme for about a year now and I love it!
    Something I have been trying to figure out (in lieu of using a different theme) is how to make my homepage (or all pages if using just one would be destructive) 100% browser width and still responsive. For the homepage I want a a padded masonry grid. some examples -

    In theory I'd like to be able to use the grid option on other blank pages too , as an archive.

    Anyone have any insight on the possibility of this working/conflicting with Quark?

    my website

  2. ahortin
    Theme Author

    Posted 9 months ago #

    The div's that contain the main content area have the width set with the following styles:

    max-width: 1200px;
    width: 90%;

    I would suggest resetting these styles in your child theme and that should make things full width. So, change them to:

    max-width: auto;
    width: 100%;

  3. jessicaclark
    Posted 9 months ago #

    hmmm, no go. I tried applying this rule to all elements with the 1200/90 attribute and nada. I'll keep digging around.

    Thank you!

  4. ahortin
    Theme Author

    Posted 9 months ago #

    Hmmm strange. I was able to make those changes using Firebug and everything went full screen. Did you remember to change the max-width style as well as the width?

  5. jessicaclark
    Posted 9 months ago #

    Hi and thank you for continuing to help! Yes, I changed both for .site-content. I have also tried using !important clause and applying the rules to
    - div#primary.site-content.row
    - .site-header
    - .banner

    Everything is still boxed into 1200px! When I inspect the site live, max-width:auto; is struck out.

    Thanks again,


  6. ahortin
    Theme Author

    Posted 7 months ago #

    Hi, Apologies for the long delay. Try the following styles in your child theme and see if this works:

    #bannercontainer .banner,
    #maincontentcontainer .site-content,
    #maincontentcontainer .home-sidebar,
    #footercontainer .site-footer {
        max-width: 100%;
        width: 100%


You must log in to post.

About this Theme

About this Topic