Need some code help around hero images please

Highlighted
New Member
10 0 0

I had some new banners designed by my graphic designer and after putting them up on our site here - www.nakedneckjewelry.com they aren't proportionate on desktop and mobile. She is fantastic and came back to me with this:

"The image is set to float in the center: CSS style— .collection-hero__image {background-position: 50% 50%;} and the height is set at differently for the home page and the subsequent pages like I suspected.. Some forums suggest changing the height, some suggest changing the background-position percentages. In reality, we can just make sure that any graphics used in headers have a centered point of interest to avoid being cropped at different screen sizes.

 
If you want a fix now, I would suggest changing that css style to:
.collection-hero__image {
    background-position: 0% 50%;
}
so that the left side stays visible."
 
 
Can someone tell me where I would find this code to change?
0 Likes
Highlighted
Shopify Partner
552 67 89

Please put this code at the very bottom of your theme.scss.liquid file which you would find under the assets folder when you go to :

Admin -> Online Store -> Themes -> Action -> Edit Code

.collection-hero__image {
    background-position: 0% 50%;
}
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
10 0 0

Thanks. I made the change but it didn’t appear to fix the main page image, especially on mobile. Any suggestions? I’ve attached it here.

 

IMG_9084.PNG

0 Likes
Highlighted
Shopify Partner
1427 193 477

The background position is being set inline, so it's probably being done by Javascript. Use this and add an !important flag after the style to override it:

 

@media (max-width: 767px){
    .hero {
      background-position: 0% 50%!important;
    }
}

 

This will only affect mobile.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
10 0 0

So take your code and replace the code suggested above or add your code below the code suggested above?

0 Likes
Highlighted
Shopify Partner
1427 193 477

If the other code isnt doing anything for you just remove it, no sense keeping it there. Then place the other code at the bottom of the file.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
10 0 0

Just noticed that this only fixed mobile..how can I make the images look appropriate on desktop as well?

0 Likes
Highlighted
Shopify Partner
1427 193 477

What's wrong with the desktop view? It seems fine to me so that's why I had that code placed in a media query to only affect mobile screens.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
10 0 0

Here are the newly designed banner images. Let me know if you can't access Dropbox. - https://www.dropbox.com/sh/8tsbtbdy7xq7rxc/AACAg7sd8OZw30dA9XfAx4uba?dl=0

Notice the bracelets and necklaces image....the top and bottom appear to be cutoff on my end.

0 Likes
Highlighted
New Member
10 0 0

Any assistance here?

0 Likes