Archived topic
Issue with setting padding in %
7 replies · Started by Aleksi on March 12, 2023
Hi thanks for GP and GB,
About setting the padding in % to keep the same spacing ratio between differents width size and also in this case the top padding between the 1920 and the 1440 version.
I tried to set the top padding in the first section (front page) from the 1440 version, i set the block minimum height to 728px (from the 1440 version), and calculated the padding in % from that (96/728), but it didn't get it right.
Any idea on how we can calulate that? or any other solution to that?
Thanks.
Hi there,
in CSS - if you use % for padding ( and margin ) then the calculated sizes are always relative to the elements width. Even Top and Bottom.
So don't use % padding, use fixed pixels or another unit.
Thanks,
If understand well, top and bottom padding % are not calculated from the element's height, but it's width?
So it's seems the only solution is to set that manually with CSS for the 1920 version.
If understand well, top and bottom padding % are not calculated from the element’s height, but it’s width?
That's right.
So it’s seems the only solution is to set that manually with CSS for the 1920 version.
We need to see your HTML structure to advice.
Can you link us to your site?
Yes sure, here it is.
What are the differences between the 1440 version and 1920 version for the blue container?
What will the blue container width and height be in the 1920 version?
There was an update. It's full width now.
For the headline top padding it's 120 on 1920 and 96 on 1440.
So i will have to either set it manually for screen width 1441-1920, or set padding in % to keep the ratio on difference device size.
We don't have custom breakpoints for those kinds of changes but its not impossible.
Before we look at the options, are there any other changes that happen between these screen sizes ?
