How to reduce the size of the text box in your image banner

[kickthathicc]

hello everybody... my website is kickthathicc.com... as you can see in the image below the first banner the text box overlaps the product... and the second banner is okay. I just need a way to reduce the size of the text box in the image banner so that the text doesn't overlap with the straws.

if anybody has a solution it would be much appreciated and i will be sure to like and accept your post.

[Marcus--T]

It’s something easy to do you highlight the text to increase the size and when checking out your store  I saw that you didn’t add any link to the CTA” shop now” You should fix that too

[Made4uo-Ribe · Accepted solution]

Hi @kickthathicc 

Check this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. 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:

div#Banner-template--24316128493847__image_banner_CWqGtY .banner__box.content-container {
    max-width: 60rem;
}
@media only screen and (max-width: 1149px){
div#Banner-template--24316128493847__image_banner_CWqGtY .banner__box.content-container {
    max-width: 50rem;
    width: 50%;
}
}

• And Save.
• Result:
• 

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

[kickthathicc]

Thank you... this worked for me

[kickthathicc]

this actually worked for desktop but it ruined the mobile version