Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 1, 2016 at 9:43 am #641342
    hugaud

    Hi,
    Is there a way to reduce the vertical gap between each widget area in the footer of this site on mobiles only please ?

    Thanks in advance
    Hugues

    June 1, 2016 at 10:03 am #641349
    Jordan

    Hey Hugues,

    Try the following CSS:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all .flex_column{
    margin-bottom: 0px !important;
}
}

    If the space is not reduced enough for you using 0px, negative numbers can also be used.

    Best regards,
    Jordan

    June 1, 2016 at 5:32 pm #641617
    hugaud

    Thanks Jordan,
    I’ve used this code using negative margin as suggested:

    /* reduce footer widget vertical spacing mobiles */
    @media only screen and (max-width: 767px){
    .responsive #top #wrap_all .flex_column{
    margin-bottom: -10px !important;
    }
    }

    HOWEVER This has the unintended consequences of reducing the gap between the buttons and the images below on the homepage so they now touch on mobiles. Is there another way of targeting the vertical space between each footer widget on mobiles without affecting other areas of the site please ?

    Thanks in advance
    Hugues

    June 2, 2016 at 11:15 pm #642293
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
#footer .widget {
    margin: 5px 0;
}}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.