Block grid not spanning full column

Support
#1

Support,

I’ve tried searching, but couldn’t find an answer. I’m using a two-up block grid and have the left block set to 40%. It looks great, but the text in the right block does not span the entire column.

Here’s a screenshot: https://screenshots.firefox.com/RJrFiMigo9PaNU29/www.motorfieds.com

Here’s me CSS:

.blockgridleft {
width: 40% !important}

.blockgridright {
text-align: justify;}

How can I achieve full width for the right block?

Thanks,
Chuck

#2

Hi Chuck,

Thank you for writing in, would you mind providing us the direct page URL so we can take a look?

Have a nice day,
Cheers!

#3

https://www.motorfieds.com/motorcycles/1027/

Also, What’s the best way to go about making the block grid responsive while changing the widths?

Thanks,
Chuck

#4

Hi there,

When you change a column’s width, you should also change the others. It should be like this

.blockgridleft {
width: 40% !important;
}

.blockgridright {
text-align: justify;
width: 55% !important;
}

The total width of a row is 100%. In two columns, there is a space in the middle which takes up the 5% of the width, which makes the available width 95%. Hence each column has 47.5% width, and since you changed it to 40%, you need to add the remaining 7.5% back to the second column, which makes it 55%.

And please correct your added class to the grid item’s class, you added it like this .blockgridright. There should be no dot, it’s only applicable for CSS.

Thanks!

#5

Rad,

This didn’t work. Made it worse.

Screenshot: https://screenshots.firefox.com/jGHfIAs1HipunsuP/www.motorfieds.com

Thanks,
Chuck

#6

Hi there,

The code given by my colleague is correct. The problem is the name of class you added for the grid:

You added .blockgridright instead of blockgridright, the extra dot in the HTML code is the cause of the problem. Please do not change the CSS code and just change the name of the class.

Thank you.

#7

Rad,

I fixed the code, but I’m getting the same result: https://screenshots.firefox.com/RzXwAvw1eDF9jDGd/www.motorfieds.com

Thanks,
Chuck

#8

I went another route as I’m using Bootstrap, so this can be closed.

Thanks,
Chuck

#9

Hello There,

Thanks for letting us know that you have figured out a way to resolve your issue.
If you need anything else we can help you with, don’t hesitate to open another thread.

Regards.