[Resolved] Footer Widget Padding

Home Forums Support Footer Widget Padding

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1304897
    Bill

    Hey guys,
    I’ve tried looking at previous topics (which are generally a huge help) but I’ve not managed to find a solution to this one so far.

    On Desktop view in Footer Widget 3 (Search Bar/Social media links), I’m wanting to add padding above the search bar (20px) to push it down a little. I would prefer for Mobile to be unaffected.

    On Mobile view, I’d like to reduce the padding between each Footer Widget, so I’d like to close up the gaps that are quite substantial between the three separate widgets.

    Please note, I have already added three ‘Additional CSS’ codes, but they are related to centering and other padding

    Thank you.

    #1305184
    David
    Staff
    Customer Support

    Hi there,

    you can adjust the Footer Widget Area Padding separately for Desktop and Mobile in Customizer > Layout > Footer

    Mobile will inherit Desktop values unless you assign them a value.

    For the mobile spacing – try this CSS to reduce that:

    @media (max-width: 768px) {
        .inside-footer-widgets>div:not(:last-child) {
            margin-bottom: 20px !important;
    }
    #1305210
    Bill

    Hi David,
    Thanks for your quick and helpful response.

    I tried using the Customizer > Layout > Footer padding, but it was just Widget 3 that I was hoping to add a small amount of padding to the top. Doing it this way does the same for all three.

    The CSS worked perfectly though, thank you!

    #1305490
    Bill

    I think I got it with this, David.

    .footer-widget-3 {
        padding-top: 9px;
    }

    Would that be correct?

    #1305558
    Leo
    Staff
    Customer Support
    #1305860
    Bill

    Cheers, Leo! 🙂

    #1306173
    Bill

    Sorry guys, I’ve just noticed something.

    This code:

    @media (max-width: 768px) {
        .inside-footer-widgets>div:not(:last-child) {
            margin-bottom: 20px !important;
    }

    Seems to be conflicting with this, which I already have to display ‘Related Posts’:

    .wpsp-related-posts1 {
        background-color: #fff;
    		text-align: center;
        padding: 24px 20px 10px 10px;
        margin-top: 40px;
    		margin-bottom: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        box-shadow: #d0edff 0 7px 28px !important;
    }

    On the Desktop site, it’s causing a conflict, but on Mobile it’s fine.

    Thanks in advance.

    Edit:
    I think it’s down to this:
    @media (max-width: 768px) {

    I have adjusted it to ‘2188px’ and it seems to have cured it.

    I also deleted ‘max-width’ entirely and didn’t notice any issues that I can see.

    Please could you advise what the recommended width should be for optimal desktop/mobile viewing?

    Thank you.

    #1306523
    Leo
    Staff
    Customer Support

    Did you make sure to close the @media bracket for this code here?

    @media (max-width: 768px) {
        .inside-footer-widgets>div:not(:last-child) {
            margin-bottom: 20px !important;
    }

    It should be:

    @media (max-width: 768px) {
        .inside-footer-widgets>div:not(:last-child) {
            margin-bottom: 20px !important;
        }
    }

    Otherwise all the code below that would be wrapped in @media (max-width: 768px) {

    #1307999
    Bill

    Thanks so much, Leo!

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