Homepage not at Full Width

  • I have my website set to full width. All of the documentation says that full width will make the content stretch to the full width of the browser. However, while the Product Hero plugin makes the product hero on the homepage go full width, the actual content of the page does not stretch full width.

    I’ve tried this with the home page set to ‘homepage’ template and to ‘full width’ template, and there is always a gap around the home page content. I’ve also checked this with multiple browsers: Chrome, Safari, Firefox.

    Here are screenshots of my home page and settings:

    Home page with gap: https://screencast.com/t/9G2KIMHtAAQ
    Page Attributes: https://screencast.com/t/zUDWD644aES
    Customizer Layout: https://screencast.com/t/YXiFreTpt

    Any help getting the home page content to stretch to the actual full width of the page would be great.

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

  • Hi Tiffany,

    A link to your website would help to target the appropriate elements with CSS and also to assess the result.

    However, if you’re using the full-width template on a page, you should get a full-screen layout by adding this CSS snippet to a custom CSS editor or a Storefront child theme:

    .col-full {
    max-width: 100%;
}

    This really stretches the content all the way, which might not be what you want. I recommend you add a max-width value of at least 80-90%.

    This is a quick solution, let me know if it works for you.

    Maria is correct. The max-width option in the Storefront Designer extension will set the max width to 80 or 90% (I can’t remember which off the top of my head). I wouldn’t recommend making it ‘true’ full width as your content will start to butt up against the edge of the browser window. That will definitely harm readability.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Homepage not at Full Width’ is closed to new replies.