make entire site full width

  • Resolved sparkscode

    (@sparkscode)


    6 years, 2 months ago

    I’m a novice wordpress user creating a new website for my T-shirt printing company.

    I’d like to make the site appear full screen. I’ve set the pages to “full width” but for some reason I’m still getting these borders. I’d like to fill the red boxes of white space shown in the following screenshots:

    Front page
    Product page
    Design page

    I’ve got the site origin css plugin but sadly this doesn’t seem to have the capability to make everything full screen. I’d love to fill up this white spaces with tasty content but can’t seem to work it out! I googled and found several different codes to put in my child themes functions php file but none of them made any difference at all ??

    Anyone who can help it would be much appreciated ?? thank you

    • This topic was modified 6 years, 2 months ago by sparkscode.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • laceyrod

    (@laceyrod)

    Automattic Happiness Engineer

    Hi there,

    Thanks for reaching out!

    It looks like you may have switched to the Mystile theme, is that correct? Also, it looks like you were able to change the background color to fill this in. Additionally, you can always use sidebar widgets to help fill in some of the space or add content if you’d like: https://docs.woocommerce.com/document/woocommerce-widgets/

    Let us know if you were able to get this sorted!

    Thread Starter sparkscode

    (@sparkscode)

    It looks like you’ve tried to access my site, which currently redirects to my old site (which is on mystile). The new site I’m creating is definitely storefront, if you see the screenshots it shows how my new store looks but due to the redirects I have in place you can’t see it live… Ideally I’m looking for a way to just make the content of the site wider rather than adding sidebars and widgets, we want to keep it as simple as possible ??

    AJ a11n

    (@amandasjackson)

    Hi @sparkscode

    The easiest way to make the homepage, shop page, and product pages full width would be to use Storefront Powerpack

    Otherwise to implement full width on these pages, try using the code below: 

    add_action( 'wp', 'woa_remove_sidebar_shop_page' );
function woa_remove_sidebar_shop_page() {

    if ( is_shop() || is_tax( 'product_cat' ) || get_post_type() == 'product'  ) {

        remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
        add_filter( 'body_class', 'woa_remove_sidebar_class_body', 10 );
    }
}

function woa_remove_sidebar_class_body( $wp_classes ) {

    $wp_classes[] = 'page-template-template-fullwidth-php';
    return $wp_classes;
}

    The code removes the sidebar on the shop page, product categories and the product page. It also adds the page-template-template-fullwidth-php class which enables the layout to be in full width.

    Hope this helps!

    Luminus Alabi

    (@luminus)

    Automattic Happiness Engineer

    Hi @sparkscode,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘make entire site full width’ is closed to new replies.