Optimizing Responsive Design: Height & Spacing Feedback Needed :grin:
https://codepen.io/Redcaus12345/pen/gbOprrp Hey,
I'm working on making this responsive. Does the height and font adapt well to different screen sizes? I know the video might not load on CodePen, but apart from that, do the spacings look good, or are there any improvements you’d suggest?Thanks!
13 Replies
I think it is terrible
is there a better way
All I can see is a white stripe towards the bottom of the viewport on a pale green background.
I feel that you need to be more specific with your questions and actually have some content to better understand what you need help with.
Changed it
i am sorry
So what is it that you don't like about it?
I do find it strange that the video section is two thirds of the way down the page which is strange though presumably it would have content above it ?
One thing that I would probably change is the max width of your Lorem-Text element. On larger viewports it extends onto one line and is rather long. I would suggest limiting the width and defining some balance
The button is also a bit strange. I think that you have over complicated it with having dynamic width and height.
You could maintain it's design by just using some padding .
By using em it will always be relative to the button font size, eg. :
Thank you very much! I found the spacing between the three divs strange, and I wasn’t sure if I did well with the font responsive units and everything.
You have your sections (before and after) set to 50vh so the first one is pushing the video section down so that it starts at the mid way point of the viewport.
If you reduce your section heights this will move up.
However if this is a stand-alone page with no content before or after the video section and you want this section to be in the vertical center of the viewport there are better ways to achieve this (eg. flex or grid)
The sections before and after are placeholders that will be filled later. Is it possible to make the fints stop growing after reaching a certain pixel value?
just reduce the max value in the clamp()
Smart 😃
Thanks
Unfortunately, I can’t see how the words are shrinking. Shouldn’t they shrink or grow with the clamp() function?
They do on your CodePen.
By the way, you should convert your second "default" value into rem so that the user can scale/zoom it just like the rest of the code.
There are mathematical calculations that you can (should) make to work this out but I must admit that, at least in my demos where I use clamp(), I tend to just add a small amount in rem, eg:
The last Question 😂
Is there a way tro control the gaps between title text and btn ?
You can use gap on the parent or add some margin
Oh okay