Shopify image banner to not be a full screen in Taste

Shopify Discussion

Topic summary

Goal: make the Taste theme’s image banner not full-screen and remove unwanted side lines that don’t match the store’s color scheme.

What was tried: Custom CSS applied to .banner (max-width and centering) successfully reduced the banner width but introduced mismatched side lines.

Proposed fixes and results:

  • Adding code in theme.liquid (above ) was suggested, but it reverted the banner to full-screen, which was not desired.
  • Applying a CSS linear-gradient background to the specific image banner section (added in base.css) aligned the banner sides with the color scheme. The merchant confirmed this resolved the visual mismatch.

Remaining issue: The banner/section background color changes on scroll. Addressing this requires JavaScript changes in theme .json/liquid files.

Guidance on next steps: Due to complexity and the need to review the theme code, no direct JS snippet was provided. Recommendation is to hire a Shopify developer to implement the scroll-related behavior.

Status: Visual color mismatch fixed via CSS; scroll-based color handling unresolved. Screenshots were shared to illustrate the issue and solution steps.

Summarized with AI on January 5. AI used: gpt-5.
1

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
Screenshot 2024-02-21 023906.png1920×554 185 KB

2

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

PageFlyRichard_0-1708479584791.png
PageFlyRichard_0-1708479584791.png1483×953 270 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

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.

4

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
Anshul_arora_0-1708503480899.png1536×800 205 KB

Thank you.

1 Like
5

Hi Anshul,

In which css file I need to add this code?

Thank you!

6

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?

7

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.