Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 9, 2016 at 7:58 am #670186
    gerardbao

    My 5 column footer doesn’t break down properly on iPad. It breaks down to 2 columns and is not aligned.

    How can I have it so it simply breaks down into 1 column on tablet?

    August 10, 2016 at 6:11 am #670632
    Rikard

    Hi gerardbao,

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

    @media only screen and (max-width: 989px) and (min-width: 768px) {
#footer .av_one_fifth {
    margin-left: 0% !important;
    width: 100% !important;
}
}

    Thanks,
    Rikard

    August 10, 2016 at 8:57 am #670696
    gerardbao

    That helped!
    There seems to be a bit much of empty space now.
    Is there a way we can nearly fill that in?
    Maybe make 2 rows to fit 50%/50% on a row under the logo?
    So it would be
    Logo (column 1)
    Column 2 Column 3
    Column 4 Column 5

    August 13, 2016 at 4:33 am #672161
    Ismael

    Hi,

    Please adjust the code:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
#footer .av_one_fifth {
    margin-left: 0% !important;
    width: 50% !important;
    min-height: 300px;
}
#footer .av_one_fifth:first-child {
    width: 100% !important;
    min-height: 1px;
}
}

    Best regards,
    Ismael

    August 16, 2016 at 1:21 am #672920
    gerardbao

    That helped a little. However the last column breaks down into a separate row instead of the right half.

    See screenshot in private.

    August 17, 2016 at 8:22 am #673553
    Guenni007

    first of all:
    on some browsers there are some strange befhaviors on margin settings – so try first a width of 49% for .av_one_fifth in the css code above

    second: i do not see your site but as i know there are after each flex-column a clearing of both sides. It might be a solution to set the clearing only to the first-child , “third-child” , fifth-child and so on .
    There is no third-child nor fifth-child class on those columns so you can play a bit with :nth-child(2n+1) n starts at Zero =0
    so try this here:

    #footer .flex_column::after, .clearfix::after {
    clear: none !important;
}
.responsive #footer div .av_one_fifth:nth-child(2n) {
    clear: both !important;
}
#footer .av_one_fifth:nth-child(2n+1)::after {
    clear: both !important;
}
    • This reply was modified 8 years, 3 months ago by Guenni007.
    August 17, 2016 at 8:59 am #673564
    Guenni007

    on using the clearing option it might be not neccessary to set the width of the first-child to 100%

    and btw. : with your small lists ( with your nick your site is easy to find :lol) – you can set the rule from 480px on so here is the full code which might work:

    it seems that this rule is enough solution for that problem:

    @media only screen and (min-width: 480px) and (max-width: 989px) {
#footer .av_one_fifth {
    margin-left: 0% !important;
    width: 50% !important;
    min-height: 300px;
}
#footer .av_one_fifth:first-child {
    min-height: 1px;
}
.responsive #footer div .av_one_fifth:nth-child(2n) {
    clear: both !important;
}
}
    August 18, 2016 at 6:39 am #674043
    Rikard

    Hi,

    Thanks for the suggestions @Guenni007, could you try that out @gerardbao?

    Regards,
    Rikard

    August 19, 2016 at 12:18 am #674425
    gerardbao

    Looks great. Thanks!

    August 20, 2016 at 6:43 am #674931
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please open a new thread if you should have any further questions or problems.

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘5 column footer not breaking properly on tablet’ is closed to new replies.