This topic has 7 replies, 2 voices, and was last updated 7 years by 
-
-
I want to create an image grid, 6 images on a row like it is on this page
But I want a situation where it can resize to three images in two columns and then two images in three columns as the screen gets smaller. Kleo feature grid limit is 6 and image grid would only resize them to one image per row in 6 column at it first resize.
How can I go about it.
Thank you
Hello, i can help you with the change, its only css, please share the resolution you want the rows to change so i create an css code for each size
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionOk,
1. From Ipad landscape screen to higher screen size I want a single row for the 6 item
2. On Ipad portriate size and related screens sizes, I want it to break into to rows with 3 items on each row.
3. On the widest mobile phone screen down to the smallest, I want the row to break further into three with two items on each row.The items are just icons and titles underneath so for this particular page section it would be good if the icons can be resized to fit 2 per mobile screen.
I hope this is what you asked for.And what do I use to display the grid. What you have there is 6 columns with each column showing each image. If that’s okay, then advice where to put the CSS
Thanks a lot
Hello, please add this to style.css of child theme
COPY CODE@media (max-width: 768px) { .wpb_column.vc_column_container.vc_col-sm-2 { width: 33% !important; } } @media (max-width: 767px) { .wpb_column.vc_column_container.vc_col-sm-2 { width: 50% !important; } }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionNice Laura. Thank you. This achieved just the 2 column adjustment. You used 768px and 767px, just a pixel difference, is that what you meant?
Hello, yes, i just checked and on tablet i see 3 columns and at mobile 2, please try to clear each device browser cache before testing, or let me know which device is not showing correctly 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionAlways happy to help 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘Bugs & Issues’ is closed to new topics and replies.