Docs

[jbbaille2]

Hi Support !

I struggle a bit with the layout of my new page… Can you tell me if I need to create customs CSS or I am missing a hidden tool on wordpress/X Theme to organise my blog? Thank you very much!

[jbbaille2]

This reply has been marked as private.

[Nabeel A]

Hi there,

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

[jbbaille2]

Thank you for the quick reply. I desactivated all my plugins, but it still the same mess unfortunately…

[Lely]

Hi There,

I can see that the blog is a mess right now. Upon checking, there are custom CSS that is causing this. Adding position to container is not advisable. This will make you content overlap with the navbar. Please remove the following:

.x-container.max.width.offset{
  	position: absolute;
  	top: 0px;
    height: 100vh;
    width: 100vw;
}

Adding the following will make you content from edge to edge of the browser:

.x-container.width {
    width: 100% !important;
}

Please also remove it.
Then this custom CSS will remove the default spacing of the container from the header:

.x-container.offset {
    margin: 0 auto;
}

Please remove it also.
Then also remove this:

.x-main {
    height: calc(100vh - 100px);
    position: absolute;
}

Please note that adding absolute position will alter your display. It will make your elements overlap if it is not done properly. Then adding CSS would be better if it’s specific because it will be applied on each pages of the site if not.

Hope this helps.

[jbbaille2]

Thanks Lely for your time. I removed

.x-main {
    height: calc(100vh - 100px);
    position: absolute;
}

.x-container.width {
    width: 100% !important;
}

Because it doesn’t have any consequence on the other pages. However, I would like to keep the two other code because I would like to have the navbar overlap the background picture. Another reason, when I remove

.x-container.max.width.offset{
  	position: absolute;
  	top: 0px;
    height: 100vh;
    width: 100vw;
}

There is a white band that appears on the right hand side. This previous code is the solution that I found with Themeco support to remove that white band. I have no idea why there is this band since I choose full width content in the X customizer…

[Lely]

Hello There,

I am not sure which white band you’re referring too. Please clarify to help you better.
Then please update this:

.x-navbar {
    position: absolute; 
    width: 100%;
    top: 0;
    opacity: 0.7;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
}

To this:

.x-navbar {
    width: 100%;
    top: 0;
    opacity: 0.7;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
}

We have remove this line: position: absolute;
If you want to overlap content behind the navbar, like on homepage, please use this CSS instead:

.home .x-main {
    margin-top: -90px;

}

.home will make sure that those CSS will be applied on your home page only.

Hope this helps.

[jbbaille2]

Thanks for your help. The white band I was referring to is actually not a band. It is just the whole content of the page that is moved to the right, leaving a white band on the left hand side…

So now I am organizing my whole css styles… I put specific page style on different css files (for example, I put the privacy page styles in the file PrivacyPage_stylesheet.css). I register and enqueue the style on my function.php file, it loads well when I Google inspect my page, but it is not being apply at all… I ask you this question but I don’t know if it is theme related (I desactivate all my plugins…) Thank you.

[Nabeel A]

Hi again,

Can you please provide a screenshot of White area you’re referring to? I checked your site and it seems like you haven’t installed Cornerstone plugin yet. Please install the plugin to make sure your site works properly. To do it please navigate to Dashboard > Addons > Extensions and Install Cornerstone.

Also Instead of importing stylesheets for separate pages, you can use page ID’s to make sure they are only applied to that page. You can refer to https://community.theme.co/kb/how-to-locate-post-ids/

Hope this helps!

[Author]

Posts