Topic: 7 columns of icons in one row

Tagged: x

Author

Posts
June 14, 2016 at 2:17 pm #1041943

newskywebsites
Participant

Can you please help me? I’m working on this new site: http://985.61f.myftpupload.com/

Please look at the “Industry Case Studies” section on the home page. I’d like to show the 7 icons there in one row instead of 2 and have them responsive. But I want them to have text under them like shown. I built this with 4 column layout in Cornerstone using an image with a text block under each.

Is there a way to get this into 7 columns in one row instead?

I tried Ess Grid, but couldn’t figure out how to have the text show up at all times under the image. Also tried some 7 column code found in support center, but I don’t know code, so I couldn’t get it to look right with an image and text under it.

Using integrity stack, child theme, latest X and all plugins updated. WP 4.5.2

Thanks so much!
Dawn

June 15, 2016 at 1:21 am #1042735

Rupok
Member

Hi Dawn,

Thanks for writing in! Instead of using 4 column, you can set custom column – http://prntscr.com/bgk1nl

Hope this helps.

Cheers!

June 15, 2016 at 8:33 am #1043208

newskywebsites
Participant

Actually, no. I’ve tried that, plus there are several posts in the forum about how you can’t go up to 7 columns. I already tried these solutions with no success too:

https://community.theme.co/forums/topic/17-columns/
https://community.theme.co/forums/topic/is-it-possible-to-get-7-columns/

As I said, I tried some 7 column code found in support center (from those links), but I don’t know code, so I couldn’t get it to look right with an image and text under it.

Is there another solution? Perhaps there is a way to do this with a grid? But I want it to look like an icon with text under it even before hover…

I will send my credentials privately to speed this along in case it helps.

Thanks!
Dawn

June 15, 2016 at 8:36 am #1043215

newskywebsites
Participant

This reply has been marked as private.

June 15, 2016 at 10:15 am #1043399
Rupok
Member
Hi Dawn,

Sorry for the confusion. Actually 1/7 won’t work, just an example. You need to calculate for total 12 columns. So 1/7 won’t work but 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 will work. So you can actually use 6 column with the column layout otherwise you need to go with custom HTML code.

Like :

HTML : (Add within a Text element)
```
<div class="image-list-container">
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
	<div class="image-list">
		<img src="http://985.61f.myftpupload.com/wp-content/uploads/2016/06/restaurants2-DecoFloor-150-LR.png">
		<p>Restaurants & Hospitality</p>
	</div>
</div>
```
CSS : (Add under Custom > CSS in the Customizer.)
```
.image-list-container .image-list {
  float: left;
  margin: 0 auto;
  padding: 0 20px;
  width: 14.28%;
}

.image-list > img {
  display: block;
  margin: 0 auto;
  max-width: 150px;
  width: 90%;
}

.image-list > p {
  margin-top: 8px;
  text-align: center;
}
```
Let’s change the image path and text within paragraph.

Hope this helps.

Cheers!
June 15, 2016 at 10:54 am #1043472

newskywebsites
Participant

That was PERFECT! Until I checked the results on smaller screens. See attached. How can we make this responsive? (both the image and text should be responsive if possible)

Thanks!!
Dawn

June 15, 2016 at 12:42 pm #1043638
Thai
Moderator
Hi There,

Please add the following CSS:
```
@media (max-width: 767px){
    .image-list-container .image-list {
      width: 50%;
      min-height: 240px;
    }
}
@media (max-width: 480px){
    .image-list-container .image-list {
      min-height: 250px;
    }
}
```
Hope it helps 🙂
June 15, 2016 at 12:52 pm #1043650

newskywebsites
Participant

Perfect! Thank you so much! You are amazing!
Dawn

June 15, 2016 at 1:10 pm #1043680

Prasant Rai
Moderator

You are most welcome. 🙂
Author

Posts