Hi, how do i make the image text smaller to fit on one line when in mobile view? i am using impulse theme
@mysacredsoul , Hope you are doing well.
Could you please share your store URL so, I can check and guide you?
Hi there, @mysacredsoul !
Could you let us know where exactly in your store you’re referring to here?
If this is part of your store’s slideshow then you may need to think about what kind of image you’re going to use here to work with the cropping of these sections on different screen sizes.
We’ve got some info here on our help site on best practices to use for slideshow image banners you can check out, and an article here on our blog on how to combat slideshow image cropping.
Ultimately, you will need to find an image that will work on multiple screen sizes and shapes so check out the resources shared above to find how best to work with these requirements.
Are you setting up your store still or have you already been selling a while?
@mysacredsoul , Please add the below line of CSS code at the end of your base.css file.
@media(max-width:480px){
body .hero__text-wrap .hero__title{
font-size:32px;
}
}
there is no base.css file
Hi, i am wanting to change the size of the text on the slideshow, just in mobile view.
Hi @mysacredsoul ,
Try this.
- 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” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
@media only screen and (max-width:769px){
.animation-contents {
font-size: 50px;
}
}
Result:
I hope this one what you mean.
If you cant find the base.css you can try the hero.css
I hope it help.
there is no base.css file
@mysacredsoul , open your theme.liquid file and find the closing tag and paste the below code just above it.
nothing happens