Narrative Theme Header Image cut off in Fullscreen

[IcedItOut]

Hello guys

I chose the narrative Theme and my Header Image is being cut off when i want to look at it in the Fullscreen mode. On mobile and Desktop does it work perfectly.

I'm thanking in advance for the solutions.

(Its important)

URL: https://glimmeryshop.myshopify.com/

Password: lotsai

[r8r · Accepted solution]

@IcedItOut – sorry, but it doesn't work perfectly in quite a few viewports … see for example …

or …

You can get this improved with the following two CSS rules:

#Slideshow-1643483784a2b3234a > ul > li:first-child {
  background: #e1c38e;
}
#Slideshow-1643483784a2b3234a > ul > li:first-child > img {
  object-fit: contain;
}

resulting in …

or

However, the bottom line is, that this image and the scenario you're putting it in, does not work well in a responsive setting. 

Hope this helps,
Mario

[r8r · Accepted solution]

@IcedItOut – sorry, but it doesn't work perfectly in quite a few viewports … see for example …

or …

You can get this improved with the following two CSS rules:

#Slideshow-1643483784a2b3234a > ul > li:first-child {
  background: #e1c38e;
}
#Slideshow-1643483784a2b3234a > ul > li:first-child > img {
  object-fit: contain;
}

resulting in …

or

However, the bottom line is, that this image and the scenario you're putting it in, does not work well in a responsive setting. 

Hope this helps,
Mario

[IcedItOut]

Thank you so much!

Where exaclty do i have to put the code?

[Gabe · Accepted solution]

Hey @IcedItOut 

That would be in your assets -> theme.scss.liquid of your narrative theme but a best practice is to try that in a theme copy first. If you are having trouble with your Narrative theme, don't forget we may be able to look at as part of your 60-min Design Time.

If there is anything here that’s unclear, let us know!

[r8r]

Sorry, I’m late to the party - but @Gabe saved the day while I had to save my clients 😉

Thank you and congrats on solving this!