Footer Columns not displaying properly on mobile

This topic has 7 replies, 2 voices, and was last updated 7 years, 1 month ago by Confidemus.

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.