Responsive padding – GeneratePress

This topic has 14 replies, 3 voices, and was last updated 3 years, 8 months ago by David.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
July 17, 2022 at 11:57 pm #2285725

Anil

Hi

I want to have responsive content padding of 2.78% as per screen size in

Container > Content Padding
Header > Header Padding
Sidebars > Widget Padding
Footer > Footer Widget Area Padding
Footer > Footer Padding

Please guide,
Best regards.

July 18, 2022 at 12:25 am #2285770
Fernando
Customer Support
Hi Anil,

You can try adding a CSS like this in Appearance > Customize > Additional CSS:
```
.inside-header {
    padding: 2.78%;
}

div#content {
    padding: 2.78%;
}

.widget-area .widget {
    padding: 2.78%;
}

.footer-widgets-container {
    padding: 2.78%;
}

.inside-site-info {
    padding: 2.78%;
}
```
You may modify the values to your preference.

Hope this helps!
July 18, 2022 at 1:20 am #2285816

Anil

🙁 it is not working

July 18, 2022 at 1:27 am #2285821

Fernando
Customer Support

How did you add it? I can’t see the CSS added in your site.

Kindly let us know.

July 18, 2022 at 2:28 am #2285869

Anil

please check, it is in simple css

July 18, 2022 at 2:33 am #2285874

Anil

it is not working on all screen sizes properly

July 18, 2022 at 6:06 am #2286077

David
Staff
Customer Support

Hi there,

anything specific ? As it checked the majority of them on my responsive browser tools and i can see the 2.78% padding values across all sizes.

July 20, 2022 at 12:24 am #2288100

Anil

Hi David,

1. I am looking for padding 2.78% of screen size of device… you can check header, content, sidebar – all having different content padding….

2. it is not working below 769px width of device as in i pad or mobile.

Regards.

July 20, 2022 at 2:00 am #2288180

Fernando
Customer Support

Tried looking at the site from my end as well, and it seems that the padding is set to 2.78% on all views.

How are you seeing it from your end? Can you take a screenshot where the issue persists?: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

July 20, 2022 at 2:33 am #2288206

Anil

padding is set to 2.78%, but visually appears different size padding due to container it belongs….

July 20, 2022 at 4:08 am #2288268

David
Staff
Customer Support

Thats correct.
% padding is relative to the elements content box.

For example your sidebar widget is around 360px x 2.78% = 10px

Whereas your article is around 830px x 2.78% = 23%

If you swap the % for vw units then it will be relative to the viewport width. And therefore all padding of the same value will be identical

July 20, 2022 at 9:50 am #2288745
Anil
Thanks David, is below one correct way for the solution…
```
/* responsive content padding -- 20.7.22 */
:root {
  --content_padding: 4vw;
}
.inside-header {
    padding: 10px var(--content_padding) 10px var(--content_padding);
}
.separate-containers .inside-article {
    padding: var(--content_padding);
}
.widget-area .widget {
    padding: var(--content_padding);
}
.footer-widgets-container {
    padding: var(--content_padding);
}
.inside-site-info {
    padding: 0 var(--content_padding) 10px var(--content_padding);
}
/* --- */
```
July 21, 2022 at 12:13 am #2289182

David
Staff
Customer Support

Yeah, thats correct and a good use of CSS Variables 🙂

July 21, 2022 at 2:14 am #2289281

Anil

Thanks David, Bye.

July 21, 2022 at 2:55 am #2289320

David
Staff
Customer Support

You’re welcome
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

[Resolved] Responsive padding

Popular Articles

[Resolved] Responsive padding

Popular Articles

Start building better websites today.