Responsive elements - CSS

HTML-CSS
1

Hello guys,

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:

capt.2.PNG
capt.2.PNG492×898 93.9 KB

Here is a link to my code: https://codepen.io/akelan95/pen/VwKMxYQ.

Appreciate any help and hints.

Thank you

2

Here is a screenshot of the desktop view:

capt. 1.PNG
capt. 1.PNG1920×529 232 KB

3

I saw you were using flex properties on your parent but then child1 has some fixed width.

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

.parent {
   flex-wrap: wrap; 
// 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

.child {
// 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 :sparkles:

2 Likes
4

Thank you, I will try this :smiley: