shopify image banner to not be a full screen in Taste

Solved

shopify image banner to not be a full screen in Taste

Nickitoz
New Member
9 0 0

Hi,

I want to make my banner not a full screen and I found a solution for it by adding 
.banner {
max-width: 1100px !important;
margin: 0 auto;
}

in custome css.

But now I have a problem that I have a strange lines from both sides of banner that I looks like not a part of my color scheme.

Here is a website - oleum.lt
No passwords needed.Screenshot 2024-02-21 023906.png

Accepted Solution (1)

Anshul_arora
Navigator
453 128 97

This is an accepted solution.

Hello @Nickitoz ,

Please add below mentioned CSS code in your store .css file. It will once match the background with your color schema. However, color may change on scrolling & resolve this you have to make changes in .js files.


section#shopify-section-template--19074147287304__image_banner_3qpmGG {
background-image: linear-gradient(rgb(187 206 195),rgb(153 210 176));
}

=> https://prnt.sc/1osXFYMO-mRt

I hope the code helps you.

Anshul_arora_0-1708503480899.png

 

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 6 (6)

PageFly-Richard
Shopify Partner
4661 1068 1725

Hi @Nickitoz 

 

This is Richard 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>
section#shopify-section-template--19074147287304__image_banner_3qpmGG div#Banner-template--19074147287304__image_banner_3qpmGG {
max-width: 100% !important;
}
</style>

PageFlyRichard_0-1708479584791.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Nickitoz
New Member
9 0 0

it made it full screen. But I want it to not be a full screen as on my picture and that it would take my colore scheme.

Anshul_arora
Navigator
453 128 97

This is an accepted solution.

Hello @Nickitoz ,

Please add below mentioned CSS code in your store .css file. It will once match the background with your color schema. However, color may change on scrolling & resolve this you have to make changes in .js files.


section#shopify-section-template--19074147287304__image_banner_3qpmGG {
background-image: linear-gradient(rgb(187 206 195),rgb(153 210 176));
}

=> https://prnt.sc/1osXFYMO-mRt

I hope the code helps you.

Anshul_arora_0-1708503480899.png

 

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Nickitoz
New Member
9 0 0

Hi Anshul,

 

In which css file I need to add this code?

Thank you!

Nickitoz
New Member
9 0 0

I add it to base.css and it works.
Can you help with .js file editing? What kind of code I need to write there?

Anshul_arora
Navigator
453 128 97

Hello @Nickitoz ,

I am glad the above mentioned code helps you.

For changing the color of the section on scrolling, you have to add (js) code in your .json/liquid file. It may be difficult to suggest code directly as for this we have to thoroughly review your store code and it will be a time consuming process.

I suggest you to hire a shopify developer to resolve this issue.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here