Frontend doesn't show same margins/padding as Cornerstone

[ShannonWyss]

Hi, Themeco people!

I’m slowly getting ready to launch my site. In spot-checking pages on Frontend, i’ve discovered multiple instances where what i see there doesn’t match what’s in Cornerstone, and it usually has to do with my “h1” headings not aligning with the text immediately below them.

I’m appending two screenshots as an example. The first one is Cornerstone, the second is Frontend.

and

Do you have any idea what might be going on? I’ll send you a secure note in a sec with my site’s login info.

Thanks for any insight you might have!

[tristup]

Hi Shannon,

Thanks for reaching out.
It seems that you are referring to the the Navigation menu and the Content. I have checked your settings and found that the Site Maximum Width is set to 1200px from the Theme Options > Layout and Design > Site Max Width as shown in the given screenshot. Please adjust the width and check if that helps.

Thanks

[ShannonWyss]

Thanks, @ruenel.

I tried adjusting the site max width between 767 and 1,500 pixels. Each change either only moderately improved things or made them worse. I taken the site max width back to 1,200, at least for the moment.

I’ve got specifications for headline configuration for most of my pages. I’m attaching part of the one from the page in question below:

Could something there be part of the problem?

[ruenel]

Hello Shannon,

Thanks for updating in. In our Builder we have Top Level elements which can be used as wrappers and container. They are namely, Section, Row, Column, Grid, Cell and Div element. I am seeing this:

It is best that your element structure will be like:

Section
    Row
       Column
           Text element

so that the width of the Text element will be dependent on the container which on this case, it should be 1200 pixels. Another thing is that always make sure to align the margin of the Row element to the left and right.

Hope this makes sense.

[ShannonWyss]

Hi, @ruenel!

Getting back to this after a few days.

I’ve verified that my site’s maximum width is back to 1200 px.

The headline element (section 1) is structured: Section/Row/Column/Headline.

So that should match your best practice.

Within the row, i have the right and left margins set to 4 em, as in your screenshot above:

(I tried a top margin of -6 em, as your screenshot shows, but the headline then disappeared off the top of the page.)

With this configuration, the Frontend now looks good. But i’m now showing the headline not lining up with the text in the following layouts within Cornerstone:

Tablet:

Mobile landscape:

Mobile portrait:

What else do i need to change to get the headline to justify with the text on the left of the page?

[ruenel]

Hello Shannon,

Please do not set a left/right margin in the Row element. Set it to auto instead.

Since you have enabled the Global Container, it will automatically use the 88% width and the 1200px maximum width which you have set in Cornerstone > Theme Options > Layout.

Best Regards.

[ShannonWyss]

Thanks, @ruenel!

I’ve changed the Row’s left and right margins to auto. Now all the layouts that were most recently problems (tablet and both mobiles) look great. The desktop/laptop layout is just slightly off, but i can live with that.

However, the headline is back to being not justified correctly in the Frontend view:

[prakash_s]

Hello Shannon,

I tried to access your site dashboard but the given login details are not working on my end at the moment. Please recheck and send us again.

Hope it helps
Thanks

[ShannonWyss]

Hi, @prakash_s!

Thanks for trying to follow-up.

I just logged in, in another browser, with no problems. Where are you getting tripped up?

[ruenel]

Hey Shannon,

Please check the page again. To save us time getting back and forth, I have removed the unnecessary left and right margins to the elements in the first 2 Sections on the page. Please check it now.

Thanks.

[ShannonWyss]

Hi, @ruenel.

I can see that the left and right margins of the rows of both the headline and the first section are now “auto.” Thank you.

Picking another page out to test this configuration, it doesn’t seem to be working. (Cornerstone page here.)

Here’s the frontend page before i made any changes:

Here’s the page when i changed the right margin of the first section’s row from 4 to “auto”:

And. here’s what happens when i add making the headline row’s left margin to “auto” from 2.45/1.75/1.75/1.5/1.5 em (exact numbers included here so i can go back to them easily):

Before these changes i just made, the headline on these pages looked fine in Cornerstone but not in the frontend. Now, they’re off in all but the laptop view in Cornerstone and are also even more off in the frontend.

[ruenel]

Hey Shannon,

You need to remove any Column padding and the margins/paddings of the elements inside it. If you want to increase the gap between the columns, you will have to utilize the Gap (Gap Width/ Gap Height) settings in the Row element.

Best Regards.

[ShannonWyss]

Hi, @ruenel.

Apologies for following up so late. I launched a merch store last week and accidentally deleted a DNS recored that i shouldn’t have, which meant that i couldn’t reach either the frontend or back end of my site. It took until yesterday to get that solved. So i’m back again.

In attempting to get the headline to align with the text below it, i made made the padding and margins on the column and the child headline to “0” and/or “auto” on this page from above. Now, the frontend looks fine, as do the two largest breakpoint views. Screenshot from the smaller of those two below.

But in the three smallest views, the headline doesn’t align. I’m attaching a screenshot from the smallest/cell phone portrait mode below:

Any ideas what other configurations we should to change?

[ruenel]

Hey Shannon,

The Headline and Text element as well as the Column element should not have any padding or margin. I have corrected the page already to save us time from going back and forth. I would highly recommend that only apply the padding or margin when necessary. Wrap them a DIV element instead.

Check your page now.

[ShannonWyss]

Thanks, @ruenel. I’ll work on this and let you all know if i run into any other issues.

Wishing you a great rest of your weekend!

[ruenel]

You are most welcome, Shannon.