Page not displaying full width

  • Resolved kristinubute

    (@kristinubute)


    6 years, 9 months ago

    HI, I cannot get one of my pages to go to Full Width.

    I use the Sydney them mostly and that has no issues going full width and no coding changes required.

    The Storefront I have used not very often but love the way it works for ecommerce.

    I have custom built a Home Page using Divi also which I do for every website with never an issue showing full width.

    I know that the Storefront has built in Full TEmplate when required.
    When I go to any page I see it as a drop down to choose “Full Width”.
    When I do it doesn’t go full width.
    Then I check the SETTINGS within the row and make sure margin-left: 0 and padding-left:0 to ensure nothing else is causing the issue NOT to go full width.

    I ONLY want 1 Page to go full width that’s all as I have a sliding scrolling text thing across the page and it only scrolls to a certain left hand margin so you can definately tell it is NOT full width.

    Actually no other pages need to go full width ONLY the home page.

    Therefore must be something in the STorefront theme for me to change coding ?
    CSS coding.
    I’m using Child theme also.

    URGENTLY need help !
    Advice appreciated with coding if required.

    Thanks in advance !

    Regards

    kristin

Viewing 6 replies - 1 through 6 (of 6 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    When I go to any page I see it as a drop down to choose “Full Width”.
    When I do it doesn’t go full width.

    With Storefront, Full-Width means that there’s no sidebar.

    In order to customize this part of Storefront, you’d need to use Storefront Powerpack, which has this option:


    Link to image: https://cld.wthms.co/TAKiyV

    You can get Powerpack here: https://woocommerce.com/products/storefront-powerpack/

    Thread Starter kristinubute

    (@kristinubute)

    HI

    There must be another way to make ONLY the home page full width in Storefront rather than pay for a plugin for this 1 small page ?

    It is only 1 page required.

    I have been trying to figure out some CSS coding to allow for this.
    There must be a workaround with coding.

    Any other help would be greatly appreciated.

    Thanks
    Kristin

    Another option is trying to use the is_front_page() or is_home() functions.

    I have done this recently (in the header.php file of my child storefront theme), not the best way but it works:

    if ((is_page_template(‘template-contentpage.php’)) || (is_front_page())){
    echo “<div class=\”col-full\” style=\”width: 100%; margin-left: 0em !important; margin-right: 0em !important; max-width: 100% !important; padding: 0 0em !important; \”>”;
    }else{
    echo “<div class=\”col-full\”>”;
    }

    Thread Starter kristinubute

    (@kristinubute)

    Thanks I will give that a go.
    That sounds better …

    Kristin

    You can use a bit of jQuery to get this effect. For instance I’m using the CSS JS Toolbox plugin to add the following bit of js to the front page only.

    var $j = jQuery.noConflict();
$j(function($){  
   $j("#primary").parent(".col-full").removeClass("col-full");
});

    Just thought I’d share.

    • This reply was modified 6 years, 3 months ago by da_Mask.
    Thread Starter kristinubute

    (@kristinubute)

    Thanks for your recent input. I will look into that and try it also.

    Regards

    Kristin

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Page not displaying full width’ is closed to new replies.