[Resolved] Heading alignment with page content when using unsemantic grid

[Alan]

Hi

I still seem to have a few problems when using unsemantic grid. I’ve designed most of my pages by using the “Sections”

1. Do “Sections” already contain a “Grid Container”?

2. When I place a heading at the top of the section and then I add a grid Column class like this

<h3>my heading</h3>
 <div class="grid-65">
<p>some page content</p>

directly below it, it always makes the heading about 10px to the left of the remainder of the content. Is there a way of fixing this?

You will notice that on my home page the headings and the paragraph content is all perfectly aligned to the left on the first section because the heading is inside the div column like this.

<div class="grid-100">
<h3>my heading</h3>
<p>some page content</p>

If you look at the 4th section the heading doesn’t align with the text because it’s outside the div. Sometimes it’s preferable to have the heading outside of the div so that the content in each column aligns

Thanks

[David]

Hi there,

1. Yes – thats correct.
2. The Unsemantic grid columns add 10px left and right padding to the columns. Which is why an element such as your H3 example sits 10px to the left.
Choices are:
a. You wrap the Heading in a grid-100 container
b. you strip out the padding with this CSS:

.grid-10,
.grid-100,
.grid-15,
.grid-20,
.grid-25,
.grid-30,
.grid-33,
.grid-35,
.grid-40,
.grid-45,
.grid-5,
.grid-50,
.grid-55,
.grid-60,
.grid-65,
.grid-66,
.grid-70,
.grid-75,
.grid-80,
.grid-85,
.grid-90,
.grid-95,
[class*=mobile-grid-],
[class*=tablet-grid-] {
    padding-left: 0;
    padding-right: 0;
}

3. It looks fine to me. If you chose to strip out the padding then you can avoid having to wrap your single column content in a grid column.

[Alan]

Hi David 🙂

Thanks for that.

Yes I just noticed if I put the heading in a div then everything aligns ok.

<div class="grid-100 mobile-grid-100 tablet-grid-100">
<h1>This is my page title</h1>
<h2>This is my section title</h2>
</div>
<div class="grid-65 mobile-grid-100 tablet-grid-100">
<p>Some page content here</p>
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
<p> some page content or an image here</p>
</div>

Is it good practice to just have headings in a div?

I like your css idea. That would solve a lot of problems. Which of the two methods would be the most lightweight when it comes to rendering and page speed?

Also what happens if I have a situation whereby I have a single section and I have 2 rows of columns like this

<div class="grid-100 mobile-grid-100 tablet-grid-100">
<h1>This is my page title</h1>
<h2>This is my section title</h2>
</div>
<div class="grid-65 mobile-grid-100 tablet-grid-100">
<p>Some text here</p>
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
<img>An image here</img>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<p>Some page content here</p>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<p> some page content here</p>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<p> some page content here</p>
</div>

Do I need to do anything to clear each row? Maybe in the first row the text wasn’t the same size as the image. In the past I would put each row inside a grid container because a grid container automatically clears everything but I’m not sure if I should use a grid container inside a section that already has a grid container.

Thanks

[Tom]

There’s definitely nothing wrong with having headings inside a div.

Instead of the CSS, you can use the grid-parent class, which will remove the padding.

For example:

<div class="grid-65 grid-parent">
    No padding in here.
</div>

You can use the clearfix element to clear your columns. For example:

<div class="grid-65 grid-parent">

</div>
<div class="grid-35 grid-parent">

</div>
<div class="clearfix"></div>

Hope this helps 🙂

[Alan]

Thanks Tom 🙂

[Tom]

You’re welcome 🙂

[Alan]

Just before I go ahead and edit my markup I wanted to see which of these methods was the most lightweight as far as page speed is concerned.

From what I can see by looking at the “unsemantic-grid-lite.css” the grid classes like grid-65 add the padding so if I then add grid parent to that string it removes the padding. So for every set of columns I’m adding padding and removing it again. Davids CSS idea does essentially the same thing. On average I would have 5 sections on a page and use this twice in each section. I’ve got 47 pages. Is this going to slow my pages down?

The added 10px of padding isnt causing any problems. The problem is anything thats not inside a grid class has no padding. If I just added a grid-100 around my heading like this,

<div class="grid-100 mobile-grid-100 tablet-grid-100">
<h3>My Heading</h3>
</div>

I would only have to do that once per section but it adds the box sizing everytime.

Would there be less “code” if I wrote some css so that I can add padding to a heading if I need to?

<div class="grid-add-padding">
<h3>My heading</h3>
</div>

and css

.grid-add-padding {
  padding-left: 10px;
  padding-right: 10px;
}

This is effectively what the grid-100 class does so if the added box-sizing won’t cause a lot of code bloat I would be better to use grid-100. I’d be adding this everytime.

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
`

Which is the most lightweight solution?

Thanks

Alan

[Tom]

Hi there,

I’ve got 47 pages. Is this going to slow my pages down?

No, the CSS already exists in the file, so using the class that already exists won’t slow anything down. Adding more CSS will (but barely, the change wouldn’t be measurable).

With a small amount of CSS like this, it’s really up to what works better for you. The performance difference won’t matter.

Let me know if you need more info 🙂

[Alan]

Well thats great! I never considered that. Thanks again Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts