I am a beginner in CSS and I am currently building a tribute page as my first project, I am trying to make responsive elements for desktop and phone views.
It works and fits ok in desktop view.
However, in phone view it seems to be resizing everything and seem unorganised:
Here is a link to my code: https://codepen.io/akelan95/pen/VwKMxYQ.
Appreciate any help and hints.
Here is a screenshot of the desktop view:
I saw you were using
flex properties on your
parent but then
child1 has some fixed
My suggestion is get rid of fixed size and let the browser “divide” the space.
To give you an idea on a possible fix we can add the following properties.
We want the parent to be able to create new rows if the space is not enough
// we tell the browser to wrap into a new line if there's not
// enough space for all our children
Then we instruct each child to be always as big as possible, to never shrink and to have a size of 100% of the space
// this is a short hand for:
// flex-grow: 1 -> we want our item to grow in size if needed
// flex-shrink: 1 -> we want them to shrink if needed
// flex-basis: 400px -> each element cannot be smaller than 400px.
flex: 1 1 400px;
The result? the browser will create three block of the same width and will stack them if there’s not enough space.
Feel free to play around with those till you reach your desired layout.
Hope it helps
Thank you, I will try this