Centered, full-width sections and divs

Hi there,

I’m having trouble creating consistent widths of sections and divs even though all the elements seemed to be styled correctly. You can see on this page the following issues:

  • category titles are not center on top of 3 blog posts
  • the page has a lot of blank space on the right side (none of my other pages on the website have this problem)
  • footer and green CTA section are not going all the way across the page

Please let me know what I’m doing wrong, thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@Jenna -

I’m assuming the first issue is referring to this spacing? Where the left edge of the image isn’t aligned with the left edge of the header?

image

If so, the problem is padding, the images have 20px of left and right padding and the section title only as 10px. If you increase that to 20 everything will align.

The width on the right is being caused by the width property on the blue-background element:

image

Since this element is displayed absolute, setting the width to 100% is going to cause it to inherit the width of the parent element, in this case the section wrapping it with a width of 1440, making the width of the blue element 1440 as well, but flowing off the right side of the screen. Try removing that, it should take care of the third issue as well :wink:

1 Like

Thank you! re: the blue-background, when I remove absolute - it doesn’t show up anymore, what should it be set as?

also - the centering issue i was referring to is when I make the screen really wide, the elements don’t stay in the center (screen shot below). how do i get the sections to stay in the center even when the screen is really wide?

@Jenna

To center the category titles, choose “blog-title-card-2” and under your typography settings, choose align “center”.

Cheers
Kev

@Jenna - I actually disagree with @Kevin_Mooney here (Kevin, I think you may have misread what Jenna’s issue is), what you should actually do is add a div to wrap around your section titles with the class div-40-60-padding which as you can see is used to contain content in other areas of your site, for instance the footer:

Is wrapped in a div with this class:

image

When you add that div around your text you get the following:

And you can see the set up in the navigator here:

image

You may also want to do something similar in your header:

image

But not put the blue background inside. Instead set that like this:

image

Which produces this effect:

Edit: You may also want to put the blog3-cards div inside the wrapping padding div as well like this:

image

Which I believe produces the effect you are probably after:

1 Like

@sam-g Thanks sam. I have a question on a thread (Text or Pill Style Checkbox for Custom Contact Form), I’m wondering if you could help?

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.