Responsive padding

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!

:( it is not working

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

Kindly let us know.

please check, it is in simple css

it is not working on all screen sizes properly

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.

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.

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

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

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

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);
}
/* --- */

Yeah, thats correct and a good use of CSS Variables :)

Thanks David, Bye.

You're welcome