[Resolved] Lightweight Grid Columns BG Colors

[Jeff W]

Hi Tom,

I’ve been using your theme now for about a year and I absolutely love it! This evening I was playing around with the updated header and sections add-ons and decided to give Lightweight Grid Columns a shot instead of hand coding everything.

I haven’t been able to figure out how to add a background color to an equal height column. It seems as though any class added to the short code is added to the “inner” element and the columns have no individual ID, so specifically targeting a column is an issue. If you have any suggestions with this it would be appreciated!

Here is a link to a little sandbox I’ve been playing in (don’t mind the divi reference in the link, that just happened to be the first theme I was playing around with). You will be able to see the issue I’m having in action.

http://www.provenwebdesigns.com/divi/

Also a side note, is there a reason you decided to only include top and bottom padding in sections?

Look forward to hearing back from you! Plan on getting a few coffees from me soon.

[Tom]

Hi there,

Since the equal heights script gives the parent container a height, we can set the inside element to height: 100%; and it will work.

So in your case:

.inside-grid-column.one {
    height: 100%;
}

As for the spacing – the old layout had too many options in too little space. With the latest version, we have a lot more space to work with, so options like these will be added in time.

For now, it uses the content padding option you have set in the Spacing add-on.

Hope this helps 🙂

[Jeff W]

Perfect! Thank you so much!

[Tom]

You’re welcome 🙂

[David Sutherland]

Hello Tom… Found this thread after trying this using the same technique.

Not sure what I may have misconfigured here as the columns push outside the parent “generate-section-1” all they way past the 40px Bottom Padding to the bottom of the Section. The top left and right behave as expected.

Here is the Code I am using in the Section…
(Square brackets removed as they were not showing up in the forum post)

lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="false" class="sda-card sda-col-1"
<h2>Heading</h2>
<p>Paragraph text.</p>
/lgc_column

lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="false" class="sda-card sda-col-2"
<h2>Why do we use it?</h2>
<h2>Heading</h2>
<p>Paragraph text.</p>
/lgc_column

lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="true" class="sda-card sda-col-3"
<h2>Heading</h2>
<p>Paragraph text.</p>
/lgc_column

Here are the styles I made for my responsive three column layout

@media (min-width: 768px) {
    .inside-grid-column {
		height: 100%;
	}
    .sda-card {
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.19);
        background-color: #f7f8f9;
        border-radius: 6px;
        padding: 20px;
	}

    .sda-col-1 {
        margin-left: 0px;
        margin-right: 10px;
	}
    .sda-col-2 {
        margin-left: 5px;
        margin-right: 5px;
	}
    .sda-col-3 {
        margin-left: 10px;
        margin-right: 0px;
	}
}

QUESTIONS (Inc GP usage of UnSemantic)

1. What do I need to be doing so my background is the same height for all three columns?

2. I Am using UnSemantic as it appears this is the recommended approach for your theme. Is GP built using it?

3. Does GP load any UnSemantic support files by default?

4. Is there a UnSemantic approach to accomplish gutters?

5. If i hand code any of the UnSemantic markup is there anything else I may need to be aware of as I have the Lightweight Grid Columns installed?

Kind Regards,
Dave

[Tom]

Hi Dave,

Any chance you can link me to the page?

1. What you’ve done should work.

2. Yes it is.

3. Yes, it loads all of the unsemantic CSS by default.

4. No, I don’t believe so – that’s up to us to accomplish.

5. No, LGC uses a different class to avoid any clashes. If you’re comfortable hand coding the elements, that’s definitely the way to go 🙂

[David Sutherland]

Hello Tom… The “TEST Generate Site” is in a secured directory for privacy reasons. I have opened it up and will keep it open for a couple hours. Please advise as soon as you have had a look.

OPEN ISSUE
I look forward to your assistance the equal height columns issue as your UnSemantic approach seems pretty simple and light weight.

https://test.generatepress.sutherlanddesignagency.com

UNSEMANTIC DIY APPROACH
1. If I do hand code, could you provide an example of how to activate the equal height columns as I did not see anything in the documentation regarding this?

2. Are the styles and equal height column javascript loaded for all pages by default or is this done only when the plugin is used?

3. If not loaded what is the best way to do this with your theme so there are not any conflicts?

Kind Regards,
Dave

[Tom]

Looks like the password has been added back to the site.

1. If you need equal heights, then using the plugin is your best bet.

2. Should only be when the shortcode is initiated.

3. There won’t be any conflicts 🙂

[David Sutherland]

Apologies Tom… Had the wrong directory open. You should be good to view now.

Also thanks for the DIY responses but is there any documentation other then the UnSemantic site if I want to dive deeper into all this?

Kind Regards,
Dave

[Tom]

Try doing this for the height, it will account for the 20px top + bottom padding of the columns:

.inside-grid-column {
    height: calc(100% - 40px);
}

The unsemantic site is the best place for documentation when it comes to their grid system 🙂

[David Sutherland]

Thank You Tom… That did the trick and I was not aware of the CSS calc() Function, so thanks for that tip as well.

I included a link below for others who may be interested in learning more about the CSS calc() Function as it provides some additional operators that could be useful in other situations.

https://www.w3schools.com/cssref/func_calc.asp

Kind Regards,
Dave

[Tom]

Glad I could help! 🙂

[Author]

Posts