[Resolved] grid empty space

[Chad Biggs]

Hello, I am making a 3 colunm grid using the GP grid. The problem I am having is that the grid is non responsive. when the window gets to 1024px, the columns all line up on the left. Here is the code I am using. I tried the columns plugin you have but I don’t like to use the visual editor and … It resulted in near same outcome.
Any help will be appreciated !
-Chad
`<!– Info Box 3 wide –>
<div class=”hidegrid grid-10″>.</div>
<div class=”grid-30″>
<ul>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
</ul>
</div>
<div class=”grid-30″>
<ul>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
</ul>
</div>
<div class=”grid-30″>
<ul>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
<li class=”li-services”>This is a list of stuff like this</li>
</ul>
</div>
<div class=”hidegrid grid-10″>.</div>
<!– /Info Box 3 wide –>`

[Leo]

Hi Chad,

I think using the Lightweight Grid Columns plugin is definitely your best bet here. You can use that in either Visual/Text editor and it is also mobile/tablet responsive. I think without it you’d have to write some CSS for your grid-30 class that specifically targeted for mobile/tablet. But why waste your time when the plugin already done it for you? Check out the 3 column code here: https://gist.github.com/anonymous/503190172ee37f3b9387c1b5a0d0c77f
This should be good to go once you replace your own content 🙂

[Author]

Posts