Support » Theme: Quark » FUll width home page/ masonry

  • Resolved jessicaclark

    (@jessicaclark)


    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 –
    trademrk
    amywoodside
    Noord

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    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%;

    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!

    Theme Author Anthony Hortin

    (@ahortin)

    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?

    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,

    Jess

    Theme Author Anthony Hortin

    (@ahortin)

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

    header.site-header,
    #bannercontainer .banner,
    #maincontentcontainer .site-content,
    #maincontentcontainer .home-sidebar,
    #footercontainer .site-footer {
        max-width: 100%;
        width: 100%
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘FUll width home page/ masonry’ is closed to new replies.