[Resolved] Responsive padding

Home Forums Support [Resolved] Responsive padding

Home Forums Support Responsive padding

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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.

    #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!

    #2285816
    Anil

    🙁 it is not working

    #2285821
    Fernando
    Customer Support

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

    Kindly let us know.

    #2285869
    Anil

    please check, it is in simple css

    #2285874
    Anil

    it is not working on all screen sizes properly

    #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.

    #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.

    #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

    #2288206
    Anil

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

    #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

    #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);
    }
    /* --- */
    
    #2289182
    David
    Staff
    Customer Support

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

    #2289281
    Anil

    Thanks David, Bye.

    #2289320
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.