How do I add a line break in the image banner heading?

How do I add a line break in the image banner heading?

SweatFree
Shopify Partner
62 0 12

Hi,

 

My website is www.sweatfree.co

The password is sweatfree123

 

I want to add a line break, so "here, there, everywhere" is centrally aligned & in the second line. That way, "stay connected, with your people," is in the first line and rest in the second line. Any advice on how I can do it?

 

screenshot 3.png

 

 

Chanakya Ramdev
Founder | Sweat Free (www.sweatfree.co)

https://www.SweatFree.co
Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
11017 2158 2303

Hi @SweatFree 

You can try to add this element </br> to where you want a line break in your heading. 

- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ProtoMan44
Shopify Partner
700 57 111

@SweatFree please put this style in code:

 

@media screen and (min-width: 750px) {
 section .banner .banner__box.content-container {
    width: 600px;
 }
}

 

 

ProtoMan44_0-1723697002711.png

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

EBOOST
Shopify Partner
1314 330 398

Hi @SweatFree ,

 

1. Go to Store Online-> theme -> edit code

2. Layout/theme.liquid

3. Add code below to end of file and before </body> tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".banner__box .banner__heading strong").each(function(){
    var HTML = $(this).html();
    HTML = HTML.split('people, here,');
    $(this).html(HTML.join('people,<br> here,'))
  });
});
</script>

EBOOST_0-1723697058543.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips