Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 19, 2018 at 10:58 pm #944350
    lkulube

    Hi there,

    I have a site which I’ve created 3 sections in the footer. When viewing on mobile, I’d like these section to be in 1 row, and not stacked as how it is currently.

    April 21, 2018 at 6:26 am #944797
    Rikard

    Hey lkulube,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#footer .av_one_third {
    margin-left: 6%;
    width: 29.333333333333332%;
}
#footer .av_one_third.first {
    margin-left: 0;
}
}

    Best regards,
    Rikard

    April 21, 2018 at 9:29 am #944853
    lkulube

    Hi Rikard,

    Thank you. – I’ve added the code as per your guidance, but the columns are still stacked when viewing on mobile.

    April 21, 2018 at 9:53 am #944858
    Guenni007

    deminish the 29.333 etc to f.e. 29.2%
    (100-2×6):3 = 29,333333 but borders and other settings could be responsible that it does not fit with the exact value

    and as allways it might be an important necessary:

    @media only screen and (max-width: 767px) {
#footer .av_one_third {
    margin-left: 6% !important;;
    width: 29.2% !important;;
}
#footer .av_one_third.first {
    margin-left: 0 !important;;
}
}

    or maybe you make it for very small screens as it is set by Enfold – and let the space in between abit smaller:

    @media only screen and (min-width: 480px) and (max-width: 767px) {
#footer .av_one_third {
    margin-left: 4% !important;;
    width: 30.5% !important;;
}
#footer .av_one_third.first {
    margin-left: 0 !important;;
}
}
    April 21, 2018 at 9:31 pm #944976
    lkulube

    Thank you Guenni007! The first piece of code has helped resolve my issue. :)

    April 22, 2018 at 9:10 pm #945157
    Basilis

    Hi,

    Thank you for updating us back!
    Please create a new ticket if you need something else.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘3 section footer showing as 1 row on mobile (responsive)’ is closed to new replies.