Remove Line Breaks on Mobile View

[msmpm]

Hi shopify community! 

Is there any way that line breaks be removed on the mobile view but retained on the desktop version? I used the <br> code for the subheader on my slideshow on the homepage but when I looked at the mobile version it doesn't look good. I need to have the line breaks on the desktop version but not in the mobile view. Is there a way I can do that? I use the Debut theme. Will really appreciate any help. Thank you!

[diego_ezfy]

Hello,

Thank you for your question.

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

I'll help you to the best of my ability.

Kind regards,
Diego

[msmpm]

Hi Diego,

The store URL is www.proberde.com

The line breaks are used for all images' texts in the slideshow on the homepage. 

I attached one slideshow image for reference. Hope you can help. Thank you!

[diego_ezfy]

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function findLineBreaks(){
let br = document.querySelector(`br`);

if (!br) {
	return;
}

let br = document.querySelectorAll(`br`);

for (let each of br){
    each.insertAdjacentHTML('afterend', '<span class="mobile-br"></span>');
}
}

</script>


findLineBreaks();

<style>
@media (max-width:767px){


.mobile-br{
    position: relative;
    display: block;
    margin: -5px 0;
}
}

</style>

This will allow you to control the spacing of all <br> on the website only on mobile.
Just change the -5px value to anything you wish, positive or negative.

If you want to control the <br> only for a specific section it'd require some different code, just get in touch with me through this link if that is what you wish.

Kind regards,
Diego