How to expand standard width Storefront?

  • Hi,

    I am trying to change the standard width of Storefront.
    I can do so by using a pagebuilder and setting the row to full with.

    However the shop archieve page and single product pages can not be edited with a pagebuilder and still keep that standard width.

    If I inspect with Firefox inspector this is the style I think is controlling this:

    .col-full {
    max-width: 67.141em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2.617924em;
    box-sizing: content-box;
}

    If I change the max-width: 67.141em; to for example max-width: 80.141em;

    it actually expands the page width in storefront in the Firefox console.

    However if I add this code to the child themes style.css it does not seem to work.

    Tried this as well:

    .col-full {
    max-width: 80.141em !important;

    margin-left: auto;
    margin-right: auto;
    padding: 0 2.617924em;
    box-sizing: content-box;
}

    Still does nothing…

    What am I missing here please?

    Thanks,
    Annie

Viewing 9 replies - 1 through 9 (of 9 total)

  • I accomplished this with following code:

    .home .site-content .col-full {
    max-width: inherit;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}
.home section.storefront-product-section, .home entry-header {
    padding: 0 2.617924em;
    max-width: 67.141em;
    margin-left: auto;
    margin-right: auto;
}

    In my case, I wanted just the outer div on the home page to be full width and everything else to retain the default max-width setting.

    Thread Starter LogoLogics

    (@logologics)

    Hi,

    Thanks, but I am looking for a solution for the product archives ( shop page ).
    Your code is only for the home page?

    Yes, I intended only to make portions of the home page full width, but you should still be able to achieve what you’re looking for by using the first part of the code and dropping the .home page class:

    .site-content .col-full {
    max-width: inherit;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}

    This should make the main content full width. If you drop the “.site-content” class above, it will apply full width to header and footer as well. I’m not using archives on my site, so I haven’t tested this, but I’m assuming that section uses the same class structure.

    Thread Starter LogoLogics

    (@logologics)

    Hi,

    I have tried that code, but is does not make it full width ( by that I do not mean no sidebar ) but actually have the products expand the whole visible area like here:
    https://logologics.nl/broodje/bestellen/

    I achieved that by setting the theme to full width and using the Visual Composer Woocommerce add ons. However this means lots of work instead of just being able to show the standard shop page with products in full width when on desktop.

    Thanks,
    Annie

    Thread Starter LogoLogics

    (@logologics)

    This code you gave is in this shop ( test envirement ) and as you can see the shop page: https://logologics.nl/broodje/shop/ is not full width.

    Changing the max-width on .col-full should definitely change the width of the site. This is what we do in our child themes.

    When I inspect your site I can’t see any custom css being applied to .col-full.

    Thread Starter LogoLogics

    (@logologics)

    Hi James,

    Thanks for helping me out with this.

    As you can see in my screenshot:
    https://www.awesomescreenshot.com/image/1663721/d90d67fec5d5074e8ddd97729c8bed0a

    the code below is there in mij child themes style.css:

    .site-content .col-full {
    max-width: inherit;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}

    and shop archive and product categorie pages still keep the standard width.

    I have tried changing the max-width to this:

    .site-content .col-full {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}

    but does not do a thing….?

    Thanks!
    Annie

    Your CSS is inside a comment so isn’t being applied.

    Before .site-content .col-full { add */.

    Thread Starter LogoLogics

    (@logologics)

    Yesssss!!

    That did the trick.

    Thanks a lot James,
    Annie

    Awesome

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to expand standard width Storefront?’ is closed to new replies.