Sub grid gutters OR image borders -...

User 2676159 Photo


Registered User
41 posts

Probably simple but I can't see how to do it.

I want to have 3 images side-by-side (ie no border in between) on a page in certain views (they need to be seperate so they can move with smaller screens, but side-by-side to look decent on larger screens).

I could remove the gutters from the layout, but that would break a lot of other bits. I had the idea that a sub grid would allow me to change the gutters, but subs don't allow that. And I've struggled for a couple of hours trying combinations of containers and so on. Whatever I do I can't get the images as I want, either there's a gap from the gutters, or worse.

Thanks,
David
david@kiwiscene.kiwi

User 103173 Photo


VP of Software Development
0 posts

If I understand what you are asking, on lower breakpoints, why not just start adding padding/margins so the images separate more? This way on higher breakpoints the images are right next to one another and on lower breakpoints, the images are separated.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2676159 Photo


Registered User
41 posts

It's the opposite - I want absolutely no seperation between the images on larger layouts. So far I can have gutter-sized borders between them, or I can have them in one place but seem to lose control over the layout very quickly (although that might be able to be handled with a few more breakpoints).

Smaller layouts probably will not have a border between them, but they'd move to down the screen instead of across the screen.

I'll continue to play in the mean time.

Thanks,
David
david@kiwiscene.kiwi

User 2676159 Photo


Registered User
41 posts

Well colour me "It's bleedingly obvious"!

Probably doesn't even need a sub grid (although that may help with the layout on smaller screens).

Create a container where you want the images to go. Set the overall constraints you want for the image group on the container (max width and height). Then put your images into the container, setting their witdh % at 100/number of images (so 3 images is 33%, 4 would be 25% etc), and no max width for each image (unless you have a need for futher refinement I guess). That works perfectly for me.

I still have the question though.. Would it be possible to have subgrids able to be defined seperately to the main grid, ie set columns and gutters independantly of the main grid? I can see cases where that could be a very desirable feature (or at least point me in the direction of the setting/article that clearly describes the setting that I've missed).

Thanks,
David
david@kiwiscene.kiwi

User 2676159 Photo


Registered User
41 posts

Oh, and to get them to move from across to down the screen when the size gets down so far, I just set the width of each picture to 100%.

That seems to work well - unless someone can suggest a better idea?
david@kiwiscene.kiwi


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.