line break for mobile not working

Shapely
1

Dear support,

Hope you’re having a great day, maybe better than mine.
I’m facing the following situation: line breaks in texts show perfectly in pc, but not in mobiles.
I tried adding <br/> after each line, etc, but it didn’t work.

Please take a look at the Contact session “address” (I also have problems in the About session).
The link is: https://www.crossdigital.co.jp

I attached a picture of how it looks in a mobile.

Please save me!

Best,
Marcos

2

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

@media (max-width: 767px){
.shapely_home_contact-2 br {
display: block;
}
}

Thanks!
Colorlib Support Team

3

Hey!

Thank you for your reply!
However, it seems it doesn’t work…

I still have the same issue of not displaying line breaks correctly on the mobile website.
The only change I got is that the size of the text editor box in the Contact widget got a fixed width.

Any other clues to solve that problem?

Best,
Marcos

4

Hello there,

I hope you are doing well today.

Please try this CSS instead:


.entry-content p br {
    display: block;
}

Best Regards,
Support

5

Hello!

Oops, it also didn’t work…
Just in case, I have also these additional css lines. (I believe they don’t affect any of the codes you shared with me this time.

.module.widget-handle.search-widget-handle.hidden-xs.hidden-sm {
    display: none;
}

@media only screen and (min-width: 900px) {
.col-md-4 {
    width: 50%;
}}

<br/>, <p><p/> don’t work. I type in the widget editor and they just disappear after publishing…
Do you think there will be a solution?!

6

HI

Well, try with important tag:

@media (max-width: 767px){
.shapely_home_contact-2 br {
display: block !important;
}
}