Footer Columns not displaying properly on mobile

Home › Forums › Total › Footer Columns not displaying properly on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 19, 2017 at 7:30 pm #3441
    Confidemus
    Participant

    I am using three of the four footer columns.

    Two of these contain widgets to display a facebook feed and twitter feed.

    These are displayed OK in normal (laptop/desktop) mode, but it has just been pointed out to me that on a mobile or tablet the feeds are squashed into a third of the column width. This problem also affects the third column, which is mainly text.

    My site has been online 6 months or so, so I am sure I would have noticed if this had been a problem at launch.

    Has something changed in Total? And how can I fix this?

    site is http:/mickleystud.co.uk

    September 22, 2017 at 6:59 pm #3457
    Confidemus
    Participant

    Nobody else had this problem???

    September 22, 2017 at 8:07 pm #3458
    Confidemus
    Participant

    Never mind, fixed it in custom css.

    Would be nice to know if the theme author has just abandoned this site – support used to be incredibly good.

    October 4, 2017 at 3:46 pm #3596
    Confidemus
    Participant

    I though I had fixed this, but just discovered I had created a different problem.

    It is now working OK on mobiles and tablets, but now each of the three footer columns are 100% width on desktop/laptop, instead of side by side. Can you help please as my CSS skills are very limited.

    October 5, 2017 at 10:52 pm #3598
    Hash
    Keymaster

    Remove this CSS that you have added

    .ht-footer1{
width: 100%;
mobile-width: 100%;
}

.ht-footer2{
width: 100%;
mobile-width: 100%;
}

.ht-footer3{
width: 100%;
mobile-width: 100%;
}

    and add the below CSS code

    .ht-footer {
    width: 30.33%;
}
    October 6, 2017 at 9:42 pm #3615
    Confidemus
    Participant

    No, that doesnt work – when viewed on a mobile device the columns are compressed into 1/3 of the width of the footer but still are displayed below one another.

    October 7, 2017 at 7:03 pm #3617
    Hash
    Keymaster

    Add this CSS

    .ht-footer {
    width: 30.33%;
}

@media screen and (max-width:768px){
.ht-footer {
    width: 100%;
}
}
    November 9, 2017 at 5:20 pm #3952
    Confidemus
    Participant

    Forgot to thank you – that worked perfectly!

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