How can I insert a line break in slide titles?

Shopify Discussion
1

Hi!

How can I add a line break? I’ve tried a couple of codes but it doesn’t seem to work on my theme. I want my sentence to break into two lines.

Screen Shot 2023-09-06 at 3.34.12 PM.png
Screen Shot 2023-09-06 at 3.34.12 PM.png2880×1506 153 KB

2

You should be able to do this in the Editor. Could you please share your URL and theme?

3

Sure, https://the-skinsheet-inc.myshopify.com/ the theme is Atlantic

4

The simplest way is to change the size of the content box it’s in. Navigate to Online Store > Themes > “…” > Edit Code. In the Assets folder find the file theme.css. Scroll to the very bottom and add a few lines for space. Then the following…

Here is the CSS necessary for JUST this banner on the homepage.

.template-index #shopify-section-template--14341547557004__dynamic-slideshow-1 .slide .content {
    width: 50%;
}

For all sliders that appear on the homepage only:

.template-index .slide .content {
    width: 50%;
}

For ALL sliders:

.template-page .slide .content, .template-contact .slide .content, .template-product .slide .content, .template-index .slide .content {
    width: 50%;
}
5

Hi @Val1721

The line break wont work that side cause it have more space to used. But if you squeeze theme then the other words will go down. For this example.

Made4uoRibe_0-1694034264927.png
Made4uoRibe_0-1694034264927.png809×443 13.9 KB

I used this one. If you like to try.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.template-index .slide .content {
    width: 50%;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!