Remove Line Breaks on Mobile View

Highlighted
New Member
2 0 0

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!

0 Likes
Highlighted

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
2 0 0

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!2020-10-22 00_31_51-Event Schedule from Oct - Word.png122072219_784154522379892_666745497213161732_n.jpg

0 Likes
Highlighted

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes