Site upper and lower width is not equal (picture added)

Hi,

You have this CSS somewhere within your site:

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

The padding-left: 15px; & padding-right: 15px; these left and right spaces.

Also, The left space has slightly more space because the content within one of Elementor sections also has a padding that adds to the padding-left: 15px; from the .container CSS.

the css you mentioned is something from your theme? or something i added manually ?

1. I checked any css places that it could be, nothing.
2. no css plugin installed.

what more can it be?

And for the record I really appreciate your support, and I am glad I bought this theme.

Hi there,

can you disable your cache plugin so i can see where the CSS that is affecting the container is coming from.

WP-Rocket Disabled, waiting for your reply.
Cache cleared.

Its the Mas Videos plugin that is adding this CSS:

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right:auto
}

Might want to report that to plugin developer as the container class is a commonly used class across all WP Themes and other plugins - they should make this more specific.

You can add this CSS to override what that plugin is doing:

.container.grid-container {
    padding-left: 0;
    padding-right: 0;
}

The remaining left hand padding is coming from your Elementor content.

Using the override CSS worked amazing.

I still have the left side to fix, I checked every content added with Elementor, no padding was changed.
There is a way to see what content effect this change? there are some blocks with posts / text / titles.. all checked but nothing has been padded.

Or maybe it is a global setting of the whole container? if so.. how do I configure the full container to move left / right in Elementor?

I realize that Elementor isn't your plugin, but your solutions and good support is actually whats makes me happy with your support :) im sorry for that ofc.

While I will try to continue to fix that (doing it now), I will wait for your reply to see if you can help me in this last solution.

Best Regards.

Check the Column Gap option in the Section Settings that adds 10px of spading by default. Change it to No Gap.

Ok, changed it to NO GAP, but all blocked are being stick to each other and there is no space at all between blocks so it looks weird, I changed it to Narrow, its much better, but still the is a little space in the left side.

How do I move the content of each block a little left?

And while Im here I wanted to ask another question:

What do you think about the background of my site? its white, what is the best color due to my content, or what image is preferred by your recommendation ?

Maybe this article would help:
https://themes.artbees.net/docs/adjusting-the-column-gap-in-jupiter-x-theme-using-elementor/

If not please check with their support team.

Thanks!

This is exactly what I checked few minutes before you replied lol.
Check my edited post before you replied me.

You should be able to adjust the padding of the Elementor Post Widget - but you should really ask Elementor support for this kind of help as GP has no control over that.

As per your background - it looks good to me ... some users prefer slightly off white eg. #fefefe to reduce the glare.

1. Where do I change the Background color outside the content ? (Picture added with marked places)

https://i.ibb.co/ys6ngGF/2021-01-01-00-38-25.jpg

2. Does https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180 is compatible with GP PRO or it will make complications ?

P.s

Im asking what I need instead of opening new thread, but this 2 are my last questions for now.

1. Customizer > Colors > Body --> Background Color

2. That plugin will work with GP - but i personally would not use it - it can add complications to your CSS styling. Especially as most of your content is built with Elementor you should be able to change the majority of styles in Elementor.