How can I change the size of the container and move it perfecly under the picture?

[BudwigUser]

Hello. I want the green Container bigger that it fits perfectly under the picture. Thank you for your help

[topnewyork]

Hello, @BudwigUser
Please share “Store URL”
Thanks!

[Made4uo-Ribe]

Hi @BudwigUser

This is for the desktop screen? PLease, share your store URL. Thanks!

[BudwigUser]

https://026624-b9.myshopify.com/

Password: skabig

[BudwigUser]

Yes for Desktop. On the phone its already perfect.
https://026624-b9.myshopify.com/

Password: skabig

[topnewyork]

Hello, @BudwigUser

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

.banner--mobile-bottom .banner__box {
    padding: 9rem 19.5rem !important;
}

@media screen and (min-width: 900px) {
    .banner__box {
        max-width: 100% !important;
    }
}

Thanks!

[BudwigUser]

Thank you for your help. It is in the desktopversion a little bit bigger and in the middle but on phone its akward.

[topnewyork]

Add this one code also

@media (max-width: 768px) {
.banner--mobile-bottom .banner__box {
    padding: 1rem 1.5rem !important;
    max-width: 100%;
}
}

Thanks!

[BudwigUser]

Thnak you. On the Phone its now great but on destop the container should be under or aligned with the bottom of the banner.

[topnewyork]

@BudwigUser Add this one

@media (min-width: 769px){
    .banner--mobile-bottom .banner__box{
      margin-bottom: 60px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Made4uo-Ribe]

Thanks for the info, try 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:

@media only screen and (min-width: 749px){
.banner__content.banner__content--bottom-left {
    padding: 0;
    max-width: 100%;
    width: 100%;
}

.banner__box.content-container {
    width: 100%;
    max-width: 100%;
}
div#Banner-template--24256663388484__image_banner .banner .banner__media:nth-child(1) {
    border-radius: 20px !important;
}
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[ZestardTech]

Hello @BudwigUser ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.banner--mobile-bottom .banner__box {
    padding: 10rem 20rem !important;
    margin: 0 auto !important;
}

Let me know if you need further assistance!

[DaisyVo]

Hi @BudwigUser

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 1024px){
div.banner.banner--content-align-center {
    flex-direction: column !important;
}
.banner__media.media {
    position: relative !important;
    height: 600px;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[BudwigUser]

Is it possible that the container is under the image? If no what do I have to choose instead?

[BudwigUser]

Thanks. I combined it with the other code and it worked. Can you help me with my last problem? I want the banner in CSS to be smaller than in the image and not to take up the whole screen.