Venture Theme - Add line break in slideshow header

[guyv]

Hi All!

Please can someone assist me.

I am using Venture Theme and I would like to add a line break in my slideshow header on my homepage (see screenshot below).

Thanks!

www.electricrideco.com

[GabrielS]

Hello,

If your title field accepts HTML, you can add
between the words where you want to break the paragraph.

Alternatively, you could add something similar to the below code within your theme.scss file.

.hero-content__title-wrapper {
  max-width: 400px !important;
}

Cheers!

Gabriel

[guyv]

@GabrielS

Thanks for your reply!

My title field doesn’t accept html.

I would like “FLASH SALE!” to be on the first line and “READY TO RIDE?” on the second line.

Can you think of another solution for this?

[GabrielS]

Increasing the value to 500 might do the job in this case.

.hero-content__title-wrapper {
  max-width: 500px;
}

Other, more precise alternatives (perhaps through Javascript) exist. Some of which might affect the website speed - but that is the price at times.

Cheers!

[guyv]

@GabrielS

Thanks. That solution works well for desktop view.

Can you possibly assist with a solution for mobile view? See screenshot below.

[PageFly-Victor]

Hi @guyv

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

this code will work with mobile

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.scss

@media not all and (min-resolution:.001dpcm) {

@supports (-webkit-appearance:none) {

@media (max-width:767px) {

.hero-content__title {

font-size: 2.50em !important;

}

}

}

}

Hope you find my answer helpful!

Regards,

PageFly

[guyv]

@PageFly-Victor

Thanks for your reply!

It doesn’t seem to work. Please see code and screenshot below.

.hero-content__title-wrapper {
  max-width: 500px;
}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    @media (max-width:767px) {
  .hero-content__title {
  font-size: 2.50em !important;
}
}
}
}

[PageFly-Victor]

@guyv

please try again with just this code

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.scss

.hero-content__title {
font-size: 2.50em !important;
}

[guyv]

@PageFly-Victor

This didn’t work for desktop and mobile. See screenshots below.

Just to clarify, I would like “FLASH SALE!” to be on the first line and “READY TO RIDE?” to be on the second line for both desktop and mobile.

Thanks for your help.

[GabrielS]

Hi,

The below code can handle the maximum width on desktop and mobile phones.

.hero-content__title-wrapper {
  max-width: 500px;
}
@media (max-width:768px) {
.hero-content__title-wrapper {
  max-width: 290px !important;
}
}

Cheers!

[guyv]

@GabrielS

Perfect! Thanks a lot!