Hi there,
I am working on this project:
Please check the Static Page called HOME 2
I am happy with the responsive aspect of it but can’t figure out how do I make the thumbnail images the same size without loosing the way they stretch when I increase or decrease the browser.
Many thanks for your help.
G
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Click on the Tablet breakpoint at the top of the viewer where you have the four device icons, to start with.
Then click on the CMS Collection Item that you have classed as dyn flex child home2
Now on the Style panel, open up the Flex Child section and change this:
To something that will hold fewer items horizontally so that the items may be larger. Try bumping up the Basis to something like 33 (to hold 3 items), or even 50 (to hold 2 items wide), like this:
Hope this helps.
Responsive is:
width: 100%;
height: auto;
But responsive images is not like saying “same size for all images” - maybe you talk about aspect ratio (“Crop”?)
Thank you @Lux but this not really what I am after. What I am trying to achieve is to have all the images looking the same on the desktop version to start with.
@Siton_Systems also, thanks, have not been able to make this work but when I do this should sort out 50% of my problem
@cyberdave @vincent @PixelGeek @zbrah is there any chance you could help here?
Add screenshot of the result you want (No way to help you like this). (By photoshop maybe).
Ok. First you didn’t use the correct implement of the “aspect ratio” and “cover” idea trick.
You put her fixed sizes (Wrong)
@Siton_Systems you are looking at the wrong page. Please check HOME2. Thank you for your help
@Siton_Systems oops, oops, much better. Thank you very much. Is there a way, to keep the ratio when you resize the browser so the images do not crop?
The aspect ratio always save.
You should decide without crop (Masonry) or “crop” (The idea above) (Of course you can use masonry for the cards).
Add screenshot of the problem.
More than a screenshot of the problem, here is what I am trying to achieve (except 4 images in a row)
just uploaded this video on Vimeo so you better understand:
