Shopify image banner to not be a full screen in Taste

[Nickitoz]

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.

[PageFly-Richard]

Hi @Nickitoz

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[Nickitoz]

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]

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.

Thank you.

[Nickitoz]

Hi Anshul,

In which css file I need to add this code?

Thank you!

[Nickitoz]

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]

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.