Some elements (shapes/buttons) become misshaped on the live website.

Hi,

Some buttons and shapes become bigger on the live site. I make them a certain size on the fluid engine editor but then become larger on the live site. Can anyone help?

Thanks,
Ben

Can you share your website URL and this page?

https://www.oppidaneducation.com/families/11-plus-journey-tutoring

Thanks for that!

It looks like certain elements of your website are stretching the grid height.

In this case below, the text block on the left with the heading spans 2 rows, but because the headings are dynamic, when you look at it on a bigger screen than the editing screen, that text grows and as it stretches rows and therefore stretches the blocks on the right, hopefully this screenshot shows that:

If you make the text block taller or maybe better part of the text block below (so it's just one block)

Hi Ziggy, thanks for looking into this.

My screen size is the same when I'm in the Editor as when I view the live site, yet the sizing is fine in the Editor.

I previously had that heading text block as part of the text block below and still had the same issue? It's also happening to the buttons in the section at the top of page.

Ben

8 minutes ago, benstevens05 said:

My screen size is the same when I'm in the Editor as when I view the live site, yet the sizing is fine in the Editor.

I know what you mean, there is sometimes a disparity between the live website and editor view even in the same browser.

@Ziggy, thanks. 

I don't suppose there's another reason/solution that things are changing shaped?

Thanks, Ben

51 minutes ago, benstevens05 said:

I don't suppose there's another reason/solution that things are changing shaped?

The fonts are dynamic, you could set these to be fixed in Custom CSS, which may help minimise layout shift.

But it's only an issue on a few pages/sections, so I'm reluctant to change the fonts sitewide.