Resize margin problem

Hello there,

In your Block Element for the Page Hero, can you try altering the Inner Container Width as such: https://share.getcloudapp.com/mXuxmNvv

Kindly let us know how it goes.

I altered it but nothing in result...

You have these custom codes which adds margin to the content causing them to misalign:

@media(max-width:1280px){
	.single-post div#content {
    margin: 0px 20px 0px 20px;
}

@media(max-width:1280px){
	.single-post div#content {
    /* margin: 0px 20px 0px 20px; */
}
.gb-container-beabe28a > .gb-inside-container
	{
		margin-left:20px;
	}

}

If you remove them, they should be back to the width set in the customizer.

Hope this clarifies!

Oh ya it worked but I gave the margin because if I now resize after 1200px it has not left or right margin now I have to give that a margin of 20px in both side, How to do that? what will be the CSS? You give me a margin 20px on both side from 1300px it will look good...

Or, in Appearance > Customize > Layout > Container, you can add padding values.

Then, you may also set margins or paddings in the Container Block in your Block Element to avoid CSS.

But it will not work in the page hero element...And I will only need to add those margin from 1300px;

I see.

To clarify, do you want to add margins when the screen is greater than 1300px or less than?

Kindly let us know.

less than 1300px...
At first u resize the page I gave you link lower than 1210px, you will see there is no margin in both-side, It is looking bad, I need to give them a margin to look good.

My suggestion would be to remove all custom margins you’re setting through custom CSS.

Then add a padding value on mobile and desktop in Appearance > Customize > Layout > Container. Modifying the desktop padding also affects the tablet padding.

Then in your Container Block, set a padding value for all views.

Example: https://share.getcloudapp.com/yAu1LRZj

Also see: https://share.getcloudapp.com/NQulvmKD

This should allow you to easily change the spacing, and would be much easier to modify in the future. Modifying it this way should cover 0 to 768, 769 to 1024 and anything greater than 1024px. If you’re adding the same margin value for all views, this would be the suggested way to do it.

Now, if you want to pursue modifying it through CSS, here is a code you may try:

@media (min-width: 801px) and (max-width: 1300px) {
    .gb-container.gb-container-beabe28a .gb-inside-container {
        margin: 0 20px 0 20px;
    }

    div#primary {
        margin: 0 20px 0 20px;
    }
}

I added a min-width because you have code at that breakpoint.

Hope this helps!

I can't understand your process but can u look at the link again and resize for me I think I almost did it... almost.

Hi there,

your Block Element - Page Hero.
You simply need to set its Inner Container Width to 1200px. And its Right and Left Padding to 40px.

This will then keep an indentical width to the #page container.

Yes its perfect..

Glad to hear that