Solved

Changing Width Of Image Banner On Spotlight Theme

VKF
Shopify Partner
9 0 0

How do I change the width of the image banner to match the width of the image with the other sections on the page?

 

https://c956e5-0e.myshopify.com/

 

Password 987

Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Hey @VKF,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    div#Banner-template--22333228482845__image_banner_VH3Dpy.banner {
        max-width: calc(var(--page-width) - 10rem) !important;
        margin: 0 auto !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711213624965.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Try adding this, with the same instructions

<style>
@media only screen and (min-width: 990px) {
  .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in {
      max-width: calc(var(--page-width) - 10rem) !important;
      margin: 0 auto !important;
  }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Replace the code with this

<style>
@media only screen and (min-width: 749px) {
  .banner.banner--content-align-center {
      max-width: var(--page-width) !important;
      margin: 0 auto !important;
  }

  .banner.banner--content-align-center .banner__media {
      background: transparent !important;
  }   

  .banner.banner--content-align-center .banner__media img,
    .banner.banner--content-align-center .banner__media svg {
      padding: 0 5rem !important;    
  }
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 10 (10)

VKF
Shopify Partner
9 0 0

Think my earlier question was not clear.

 

Here what I really would like to do. How do I change the width of the image banner to match the width of the  other sections on the page? I want image banner NOT to be a full width but match the width of other sections on the page.

 

I would appreciate any support I get to resolve this issue. 

ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Hey @VKF,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    div#Banner-template--22333228482845__image_banner_VH3Dpy.banner {
        max-width: calc(var(--page-width) - 10rem) !important;
        margin: 0 auto !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711213624965.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
VKF
Shopify Partner
9 0 0

Thank you so much. Your solution worked like a charm. But there is an issue with this. It only works for the banner already there. But if I insert another banner image, I need to repeat your solution with a new banner id. Is there a way to fix this permanently in the section image banner so every time I add the image banner it should be in the same width? 

ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Try adding this, with the same instructions

<style>
@media only screen and (min-width: 990px) {
  .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in {
      max-width: calc(var(--page-width) - 10rem) !important;
      margin: 0 auto !important;
  }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
VKF
Shopify Partner
9 0 0

Unfortunately, I'm back to dealing with this issue again - though only this on a bigger screen than my MacBook Pro 13". 

So the above solution solved the issue on my 13" laptop screen but when I try to view the website on a Window laptop, screen size 17.3" the image banners are not equal to the page width. They display as full width - stretched all the way to the left and right side of the screen.

 

 Also, for testing purposes, I have tried different free themes but the issue remains the same. 

Also, I have followed the latest suggested guidelines for the images size by Shopify but still it did not work. 

 

I really would appreciate it if someone could guide me to correct this issue. Sure I'm doing something incorrect somewhere but it seems like I'm lost. 

 

The Testing site is - https://c956e5-0e.myshopify.com

Password 987

ThePrimeWeb
Shopify Partner
1783 502 366

Hey @VKF,

 

I'm on a 27" monitor, and it works fine for me. Can you share a screenshot of what you're seeing?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
VKF
Shopify Partner
9 0 0
ThePrimeWeb
Shopify Partner
1783 502 366

It's only a problem for 17" screens, if you go higher or lower, you don't have that problem anymore.

 

Replace the code with this

<style>
@media only screen and (min-width: 749px) {
  .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in {
      max-width: var(--page-width) !important;
      margin: 0 auto !important;
  }

  .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in .banner__media {
      background: transparent !important;
  }   

  .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in .banner__media img,
    .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--mobile-bottom.scroll-trigger.animate--fade-in .banner__media svg {
      padding: 0 5rem !important;    
  }
}
</style>

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
VKF
Shopify Partner
9 0 0

Thank you so much for your patience and continue helping me to resolve this issue. 

 

The new code worked and solved the banner width issue on screen over 13”. 

 

But unfortunately now there is a new issue. The code only works  if I keep the  “Show container on mobile” under the image banner option unchecked or off. When I checked that option the banner width immediately goes full width on screen from 13” and bigger. 

 

My test site shows the issue comparing the two image banners - the first banner had the “Show container on mobile” unchecked and the second banner had the option checked. 

 

https://2adc7a-2e.myshopify.com

 

Password - 987

ThePrimeWeb
Shopify Partner
1783 502 366

This is an accepted solution.

Replace the code with this

<style>
@media only screen and (min-width: 749px) {
  .banner.banner--content-align-center {
      max-width: var(--page-width) !important;
      margin: 0 auto !important;
  }

  .banner.banner--content-align-center .banner__media {
      background: transparent !important;
  }   

  .banner.banner--content-align-center .banner__media img,
    .banner.banner--content-align-center .banner__media svg {
      padding: 0 5rem !important;    
  }
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website