How to make mobile browser column look like full browser column.? 8 columns possible?

[sanson12]

Hi, this would be a two part question. I have one column split up into the 1/6+1/6+1/6+1/6+1/6+1/6 and I would like to split that into 1/8+1/8+1/8+1/8+1/8+1/8+1/8+1/8 with an image in each column. If that’s possible .

Currently I have 6 mages in that single row. When I go into the mobile browser, each of the logos is on top of one another. I would like to have 3 on top of 3 (and if its possible to have 8 columns in one row, 4 on top of 4). I only know how to add CSS through the front so i cant interject html through the back.

Sorry if the way this is worded is somewhat confusing. I’ve attached images of my site in the mobile browser and a site that I want my logos to look like.

pinnacleautocare.com

thank you for any help!

[Joao]

Hi There,

I would suggest you using our Addon THE GRID instead of image elements in column.

You can use Media as a source and select your images.

On the grid settings you can select how many elements per row you want for desktop, laptop and mobile

After that you can select your grid on Cornerstone using The Grid Element. Note that the grid might not render on Cornerstone but will render on the live site.

Another option you have is to use the block grid element of Cornerstone and add image tags to each block content.

Hope itt helps

[sanson12]

Thank you for your reply and advice, so I went ahead and used the grid but I cannot figure out how to make the images the appropriate size. My images have a transparent background .

Right now on my site you can see the two sections. One with the six columns(top) and the other one with the Grid element inserted, Is there something I can do to make images the same size just like the site I used as the example?

thank you

[paul.r]

Hi,

You need to crop all your images to the same size using an image editor like Photoshop prior to uploading it to your site.

Thanks

[sanson12]

I had all images edited and cropped prior to uploading them. They are 320x180 px but with the grid they’re looking infklated.

[ruenel]

Hello There,

You will need to edit your grid skin and make sure that the image will be displayed full and not zoomed version. Or for more easier resolution, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

#grid-1833 .tg-item-image {
    background-size: contain !important;
}

Hope this helps. Please let us know how it goes.

[sanson12]

Thank you guys!

I ended up posting that css code into the theme settings but that still didn’t have the desired effect. And their was no full or zoom version to choose for image sizing. So I went into “Grid” under The Grid settings for my grid, placed x & y values for the item ratio. And finally placed 25px in Items Spacing(gutter) under the Responsive Settings.

As I played with the different ratios, I realized that The Grid did not recognize that my images had transparent backgrounds, so thats where putting 25px in Items Spacing really helped out. Hope this helps someone out.

thanks

[Joao]

Thanks for sharing the solution!