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

Product Support

AI-generated summary

A text wrapping issue on mobile view was reported on the Drowned in Sound community forum, traced to the Easy Responsive Footer theme component. ma0sm identified the problem, which began around May 8, 2022, and linked to related threads. Don pinpointed the cause to a CSS rule in the component and provided a temporary fix by adding custom CSS to a new theme component: #main-outlet { width: 100%; max-width: 100%; }. dis_whiterussian initially faced an issue with editing remote themes but successfully applied the fix after guidance from JammyDodger. ma0sm noted increased padding, which Don suggested might be due to ads, and proposed adding .wrap { margin-left: unset; margin-right: unset; } to resolve it. dis_whiterussian confirmed the fix worked. awesomerobot later pushed a permanent fix to the theme’s repository.

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:
https://community.drownedinsound.com/t/thread-titles-arent-wrapping/66342

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

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
Screenshot 2022-05-09 at 10.49.53323×208 12.4 KB

3

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

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:

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
6

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

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?

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;
}
9

Thank you, that seems to have sorted it!

12

I’ve added a fix to the easy footer

https://github.com/discourse/Discourse-easy-footer/commit/861084814909b6796574c9d09fd6ea0c4b0d949e