Text wrapping broken on mobile view due to the Easy Footer theme component

Support
1

On https://community.drownedinsound.com/, in the last few hours, something has happened to the site where wrapping is no longer applied, alongside other strange UI behaviour. This is only happening on mobile view.

image
image1920×779 190 KB

There are a couple of threads there with people complaining about the same behaviour, so this isn’t something specific to my user:

You can see from the post times, that this started happening approximately 12 hours ago, so 20:30 (CEST) 08-05-2022.

1 Like
2

Hello,

It seems to this cause by this Easy Responsive Footer
The component has a css line #main-outlet which cause this.

There is an other report about this issue on the theme component topic.

You can use this quick fix until it is fixed.
Go to /admin/customize/themes and create a new component.
Click on mobile section css and add the following.

#main-outlet {
  width: 100%;
  max-width: 100%;
}

Screenshot 2022-05-09 at 10.49.53

7 Likes
3

I updated the post above. I forget to overwrite the max-width. @ma0sm , @AquaL1te

3 Likes
4

Hi! Thanks for this. However, when I try to apply the quick fix in the admin settings I’m getting this message:

Editing of remote themes is disabled in Discourse. Please contact us if you need assistance transitioning customized remote themes to a local theme.

So it looks like we’ll need some help from you folks with this one :slight_smile:

2 Likes
5

You would add a new theme component with the extra snippet of code in. :+1:

  • Go to /admin/customize/themes
  • Click on install and then create new
  • Give it a name, and select ‘component’.
  • Create
  • Add it to your theme
  • Click on the Edit CSS/HTML button and paste the code into the CSS field in the Mobile tab
  • And save
4 Likes
6

Thank you! That seems to have done the trick! :grin:

3 Likes
7

It looks good! Thank you so much for your fast help!

7295b164b20a377a265b16e81812bb894b2c89b5
7295b164b20a377a265b16e81812bb894b2c89b53326×974 356 KB

but there is more padding than there was before, I think. Is this something that will be resolved when the full fix is in place?

1 Like
8

I think that is because the advertisement is not fit to mobile width. Can you try to disable the Easy responsive footer and the other component you created with the snippet i posted before. Just for checking the padding issue is from the adverts or other?

I think I found a possible solution for this. :thinking:

Could you add this to the same new component what you create before to check how it works? Just paste it below the previous snippet @dis_whiterussian

.wrap {
  margin-left: unset;
  margin-right: unset;
}
5 Likes
9

Thank you, that seems to have sorted it!

3 Likes
12

I’ve added a fix to the easy footer

5 Likes
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.