How to make heading text have a max width

Store Design
1

Helllo,

My current website is: jazeena.com

On my homepage hero I don’t like how the copy looks on desktop. Is there a way to change the breakpoint or the maximum width of the wrapper?

I also want to fix how the words break on mobile under the section “Experience the Body Serum Candle” Hoping it can break after “the”

1 Like
2

Hello,

You could make use of CSS, doing something similar to the below:

.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
  max-width: 400px !important;
}

Adding the above at the end of your base.css file would make the text box smaller, thus, breaking the words into multiple rows.

To target only the mobile view, you can use something similar to the following:

@media (max-width:768px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
  max-width: 200px !important;
}
}

You get the idea. Further adjustments such as breaking the space after a specific word is possible through Javascript - if this is a must, I’d suggest to get in touch with a web developer.

Cheers!

Gabriel

3

@Jazb

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.banner--desktop-transparent .banner__box {
    max-width: 100% !important;
}