Docs

[fantasy_5]

Hi!

I have read several forum threads, but I want to make sure I select the proper code so that I can resolve my issue. For SEO purposes… I would like to use breadcrumbs. However, I would like to remove the additional white space that turning breadcrumbs on creates by default. I don’t want to remove the actual area where the breadcrumb appears… just the white space within the pages itself so that products are more visible without excessive scrolling. I am currently using a child theme and was wondering if such customization will require a template change of if this can be resolved with a simple use of CSS code. Here is a link to a forum that contains code for a template update. https://community.theme.co/forums/topic/remove-breadcrumbs-section/page/2/ I have attached a screenshot.

Additionally, this code will reduce the amount of white space between the rev slider and header and works great on my shop page which is where it is needed, but It sort of ruins the way the rev slider appears on my home page. I have it set up as a full-screen slider which covers the entire page so the removal of space on the home page isn’t necessary. Is there a way to use this rev slider code on the shop page only?

.rev_slider_wrapper {
    margin-top: -20px !important;
}

My website is

[fantasy_5]

This reply has been marked as private.

[Lely]

Hi There,

Please use this custom CSS instead to remove the white space below the breadcrumbs. It is a theme settings:

.archive.woocommerce .x-container.max.width.offset {
    margin-top: 0;
}

Regarding the line on each side, it is because of the following custom CSS:

.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 96%;
    max-width: 1490px;
}

Please update that CSS to this:

.site .x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 96%;
    max-width: 1490px;
}

The comma after .site was removed.

Hope this helps.

[fantasy_5]

Hi, Lely!

The custom css that is causing the line because it contains a comma where did you find it? I don’t see it in custom css. The margin lines are also causing issues on pages that do not have white backgrounds. Please see attachment for details.

However, the breadcrumbs code did work on the shop page. Thank you! Is it possible to make a similar adjustment to reduce white space in all pages?

[Friech]

Hi There,

Please provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[fantasy_5]

Hi, Friech!

Here’s the link to my website https://shopatkei.com
It isn’t live yet so you will need to log in. Thanks so much for your help.

[Rue Nel]

Hello There,

Thanks for updating in! To remove the space, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body .x-container.offset {
    margin-top: 0px;
}

Hope this helps.

[fantasy_5]

Thanks so much for that. I still need to get rid of the margins that are shown in the screen shot. They exist sitewide. Can you please help me with this issue? You guys have been awesome. I can’t thank you enough.

[Rue Nel]

Hello There,

Please have the code updated and use this:

body .x-container.offset
body .site > .x-container.offset {
    margin-top: 0px !important;
}

And since you are using SiteGround, could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Hope this helps.

[fantasy_5]

Hi, Rue Nel!

I have decided not to remove the white space on pages other than the shop page because in doing so the pages look a bit weird. However, I did try the code, but no change in the ugly margin lines that are appearing. I still can’t figure out why they’re appearing when they weren’t there before.

I believe it has something to do with

div#top.site

or perhaps

}
.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 96%;
    max-width: 1490px;
}

When I go into the site’s customizer and change width from 96 to 100% the margin lines disappear, but I want the width to remain at 96% instead of 100 and do not wish to have the lines appear no matter the chosen site width. I’m a bit confused.

[Rad]

HI there,

A bit confusing, do you wish to make the header full-width? There is no space, it’s just that there is a line and header is aligned center.

Three options, remove the line, make it full-width, or both. What do you prefer?

For the meantime, please try this

.x-boxed-layout-active .site {
    border: 0px;
    box-shadow: none;
}

Thanks!

[fantasy_5]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code :

div#top {
    width: 100%;
}

Hope it helps.

[fantasy_5]

Hi, Christopher!

I added the code to custom CSS, and it works perfectly…. Thank you. 🙂

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts