What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

pics overlapping on handys in portrait at flex row wrap

lagraf

New member
Hi to anyone,
I've a flexbox table with row wrap which shows model pics. Pics are separated by column-gap 15px. All runs good at desktop, tablet, handy in landscape. But on android handy in portrait each row 3 pics are overlapping instead of 2 pics side by side delimited by 15px. Can someone help and tell me what's the problem?

Simple test you can find here: www.visagemodels.at/neu/test.html?mgid=2

Regards, Franz
 
The request was:
- flex-box row wrap with pics, max-width 200px
- reduce columns from 8 to 7, 6, 5, 4 when browser runs on smaller devices
- then reduce size of pics min-width 130px if browser is even narrower
- then reduce columns to 3 and 2 columns

I did it like the attached file and it does what it should.
Is this a good css or can I do something better?
 

Attachments

  • test.zip
    706 bytes · Views: 0
Back
Top