Dawn theme - reduce size of homepage image banner text container

[mmstudio]

Hello all - thank you so much for the help you provide!

I would like to make the container that holds the text on my homepage image banner approximately 1/2 as wide as it currently is, which would make the text description wrap into 2 or 3 lines.   

Site is https://michelle-masters-topiary-art.myshopify.com/

Password: auggul2

[PageFly-Victor]

Hi @mmstudio 

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
#Banner-template--18019841179963__image_banner .banner__content > .banner__box  {
width: 50%;
}
</style>

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[mmstudio]

HI @PageFly-Victor - I added the code as below but there was no change.  Did I put it in the right place?

[dmwwebartisan]

@mmstudio 

Please add the following code at the bottom of your css file.

#Banner-template--18019841179963__image_banner .banner__content > .banner__box{
    width: 50%;
    min-width: auto !important;
}

[PageFly-Victor · Accepted solution]

Hi @mmstudio 
Please try this, the code from the has the most priority.
You can replace the current code you have added with this one

<style>
#Banner-template--18019841179963__image_banner .banner__content > .banner__box {
    width: 50%;
    max-width: 50%;
    min-width: unset !important;
}
</style>

[GemPages]

Hello @mmstudio ,

It's the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
#Banner-template--18019841179963__image_banner .banner__content > .banner__box {
 width: 50%;
 min-width: auto !important;
}
</style>

Let us know how it works for you.

Best regards,
GemPages Support Team

[mmstudio]

Thank you - this also works.

[infoatcodelab7]

@mmstudio 

Step 1: Go to online store -> Edit code

Step 2: Fine base.css

Step 3: Paste bellow code bottom of the file

@media(min-width:1199px){
  #Banner-template--18019841179963__image_banner .banner__content > .banner__box {
    width: 30%;
    min-width: auto !important;
  }
}