Hello,
I have a problem concerning the responsive design.
How to insure the flexibility of phrases, icons ?
Here us you see the stars are not flexibles.
I don’t understand where is the problem.
Thank you in advance.
Not sure I understand this?
Is it the vertical position of the rating stars you are talking about?
@lasjorg for big size mobile the distance between the stars and the text is not flexible. Yes I’m talking about verticale position.
Here, the first one is ok (iPhone SE), but for iPhone 8 and iPhone 8 Plus it doesn’t work.
It looks like .conteneur-text-pop is supposed to be a flexbox container, but you haven’t set display: flex on it.
You can somewhat control the content position using justify-content but you have different values for the margin on the .star-group-pop class.
In ipad-res.css it is using percentages (margin-top: 10%) and in mobile-res.css it is using a fixed pixel value (margin-top: 24px). At some point, the 24px will just push them out of the container. I’m not even sure where exactly you are trying to place the stars vertically.
I just looked at this one component. Not all of them.
BTW, I personally find it much harder to debug the CSS with how you have it set up.
Switching to a different CSS file depending on the screen width just doesn’t give the same feedback as seeing a media query overwrite other CSS in the dev tools. You have to switch back and forth between the files by changing the screen width to see the different CSS being applied. With a media query, you just look at what CSS it is overwriting and you can see both at the same time.
FYI. You also have an extra closing div in the HTML. If you use something like Prettier for VS Code you will see it error out, and using the error message you can try to find the extra div.
1 Like
@lasjorg Thank you very much for your help. I’m reading and trying to correct my mistakes. I’ll be back if I don’t understand something. 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.