[Resolved] Landing Pages Appear Different in Live

[Mihail]

Hello, I am currently designing a landing page, and it appears different in the live version. the padding and margins get messed up.

When I edit, everything shows fine. I am having a constant issue with this.

I would appreciate any help you could provide.

[David]

Hi there,

i am not seeing any obvious issues on your site, there are no errors relating to missing styles and the design looks correct.

It sounds like you are experiencing caching issues.
Try clearing any plugin or server side caches ( eg. Redis ) if the issue persists.

[Mihail]

Thank you for the reply David,

I cleared the plugin, server and browser cache, but the problem still exists. I contacted Cloudways, and they cleared the cache to make sure I didn’t miss anything.

I am worried about this a lot.

Thank you,
Mihail.

[Mihail]

Hello, I tried using website like https://mobilemoxie.com/ to check my website and still have an issue with the live version.

Please take a look at this example.

View post on imgur.com

The first photo is the Live Version, and the second one is the Edit Verison.

Thank you.

[Ying]

Hi Mihail,

It’s because you have this CSS:
https://www.screencast.com/t/9nC78gQk5

body h2 {
    margin-top: 2.2em;
}

It adds 2.2em top margin to all h2s on your site.

[Mihail]

Hello Ying, thank you for the reply. I now understand the reason why it is that way.

How do I center these elements in the Live version, just like in the Edit version? Is it a similar thing causing the problem?

Thank you,
Mihail.

[Ying]

Yes, it’s this CSS:
https://www.screencast.com/t/u8wjahUF

[Mihail]

Thank you, this fixed my issue 🙂

[Ying]

You are welcome 🙂

[Mihail]

Hello,

1. I have a problem with some of the containers, and I can’t find what is causing the issue.

Here’s a screenshot of the problem:

View post on imgur.com

I also inserted a screenshot of how it supposed to appear like.

2. The second problem is a weird padding above the footer. I can’t seem to find what is causing this padding.

Any help will be appreciated!

Mihail.

[Fernando]

Hi Mihail,

1. You set the Container Blocks of this section to full width. Set the alignment of these Blocks to none. See: https://share.getcloudapp.com/7Kukzj0Y

2. Go to Appearance > Customize > Layout > Container, and remove the bottom padding.

[Mihail]

Thank you Fernando, I appreciate your help.

This solved the issue. Sorry for accidently posting this in this topic, and not creating a separate topic.

[Fernando]

You’re welcome Mihail! No worries!

[Author]

Posts