Hi everyone, I wanna start with that I’m a beginner, in fact this is my first client, and sorry for the long post. So my client wanted a basic replica of this website;
[https://i.imgur.com/6mqwFnA.png])Edit: [http://www.e2a.ch]) (original website)
Which is basically a flex-box responsive block based website that is capped at 6 columns, with flex grow-shrink and wrap so that the layout changes according to the dimensions. So at first I made a 6 column and inner columns section, with custom css to create the text over image on hover effect using inner columns. With that I’ve managed to hit that 6 column structure, but it wasn’t responsive like it would be in a flex-box, it only looked ok on really big screens or mobile version. on normal size or smaller screens the blocks looked stretched(when I used max-height blocks would stick to eachother even though I had 20px margin.)
e.g: [https://i.imgur.com/O8KGDcv.png]) (stretched)
e.g: [https://i.imgur.com/e4PpCGX.png]) (big screen- desired look)
So I changed the structure and started using containers (with wrap-flex start, justify content-start, align items-start, for responsive column number according to the screen size), which was a lot better, but when I used flex grow-shrink the columns would look like they’re out of place,
e.g: [https://i.imgur.com/NoIVcQk.png])
so now when I disable flex grow and shrink the site will have an empty gap on the right side of the screen, and I can’t cap the column number at 6.
e.g: [https://i.imgur.com/K3koFuS.png]) (right side gap)
e.g: [https://i.imgur.com/OqlGBVT.png]) (higher column number)
So thank you for being patient and reading through all this, but my question is how can I structure the website so that it caps at 6 column, blocks grows-shrinks and fills the screen without stretching abnormally, and have a never ending happy life.
[ad_2]