Need advice on layout

HTML & CSS
21

You mentioned a concern about an excessive number of classes in the html.

Here’s an easy way to reduce the number of tags with classes. Let’s use the middle row for this example.

Remove the class statement from the paragraphs and put it in their parent div.

change from:


<section class="row">
    <div>
        <p class="sec_two">
        <p class="sec_two">
        <p class="sec_two">

to:


<section class="row">
    <div class="sec_two">
        <p>
        <p>
        <p>

Then make one small change in the css:

from:


p.sec_two {

to:


.sec_two  p {

Now those styles are applied to all of the paragraphs in sec_two and your html is a little cleaner.

You can apply this technique to the other rows, if desired.

22

Or even eliminate the inner div and just use

.row p { ... }
23

Except that the sections are styled differently. :slight_smile:

24

Sure, if the div is needed for extra styling, that’s fine. I wasn’t looking at the larger context, just the code you posted; but in the larger context I can see that the div has a purpose. :slight_smile:

25

Thank you ronpat. That looks much better. Now so cluttered. I will go through the rest of the code to see what I can do to trim it down.