Creating Line Break for Slideshow? {Sense Theme}

[LightStyl]

So I followed a couple other posts that led me to adding the below to my base.css file:

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

But it doesn't seem to be making any changes. I just need to wrap the headline text a bit (like 50%) because the text is spilling into the image. Any ideas what I'm doing wrong? It's the Sense theme. Website is plumeskin.com

Any thoughts our guidance appreciated, thanks!

Cameron

[Made4uo-Ribe]

Hi @LightStyl 

Do you mean like this? 

If it is check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 990px){
.banner--desktop-transparent .banner__box {
        width: 50%;
    }
}
@media only screen and (max-width: 989px){
.banner--desktop-transparent .banner__box {
        width: 30%;
    }
}
@media only screen and (max-width: 749px){
.banner--desktop-transparent .banner__box {
        width: 50%;
    }
}
.banner__content {
    justify-content: right;
}

And save. 

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

[LightStyl]

I do mean like that but like the other solutions I've tried nothing seems to change when I paste the code at the very end of the base.css file:

 

EDIT: Hold on, I found the slideshow.css file (not base.css) and it might have done the trick. Works on desktop but has totally messed up the mobile view. 

[Made4uo-Ribe]

Yes, you can add on the slideshow.css. Base.css is more universal css code. 

I adjust the code, try it again. 

@media only screen and (min-width: 990px){
.banner--desktop-transparent .banner__box {
        width: 50%;
    }
}
@media only screen and (max-width: 989px){
.banner--desktop-transparent .banner__box {
        width: 30%;
    }
}
@media only screen and (max-width: 749px){
.banner--desktop-transparent .banner__box {
        width: 50%;
    }
.banner__content {
        justify-content: right !important;
}
}

and save. 

Result:

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

[LightStyl]

Okay that sorta works after some tinkering around with it. I created a slide for mobile only and a slide for desktop only and adjusted heading sizes so go them to a decent place. Is there a way to get the desktop only one to narrow a bit without impacting my mobile only one? If not or it's too tedious I'll leave with how it is. I was just hoping to get "Soft on Skin," its own line and "tough on dryness" right beneath it. But I can live with this thanks for all the help.

[LightStyl]

Can you tell me where you put that code? I changed the image and need to do this again but can't find that code anywhere.