Hi guys!
I’m working on designing a nice header and trying to keep the pictures to a minimum and rely on coding. What I’m trying to accomplish is to position items like this that is fully re-sizeable depending on screen size: Imgur: The magic of the Internet
However I’m having some problems when trying to figure out divs in grids.
My goal is to trying to make the divs in different colors and sizes (it’s going to look like chat messages), I found another forum post that talked about a simular thing but where pictures where used instead. I was wondering, is it possible to the resize divs without content as it were a picture?
The post i mentioned:
So instead of a picture taking up 100% in the parent div, I’m using a div that takes up that space. And instead of stacking in flexbox for the design, I’m using a grid with a flexboxes to position out the Divs.
Now when I’m experimenting it seems like a Div does not want to be shown in a flexbox when I’m using Max-width / height. I can only seem to accomplish correct re-sizing if a use a picture and create the chatbox itself with padding and a background color.
Is it maybe that i have the wrong angle on trying to accomplish this or what would your suggestions be?
This is the current site where I’m trying to experiment with 3 different blocks to achieve the goal:
https://preview.webflow.com/preview/petes-project121?utm_medium=preview_link&utm_source=designer&utm_content=petes-project121&preview=101293368b62949aea10a292ace0db38&mode=preview
Best regards
Pete