Image sizing for hero image

Solved
Ya_Amara
Tourist
8 0 3

Hello, 

I haven't gone live with my site yet but I can't seem to get the hero image to fit properly and still maintain a sharp image. I've attached an image that I want up as my hero but I need it in a large

not extra large size to see the entire image. As you can see the tops of the bottle are cropped out. Any help would be very much appreciated. YaHeroImage.JPG

SagarSukhanandi
Tourist
148 24 41

Hello @Ya_Amara 

Happy to help you on your issue

Could you please share your store URL to check the code? If it's password protected then please share password as well

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
KetanKumar
Shopify Partner
14401 1672 5182

@Ya_Amara 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Ya_Amara
Tourist
8 0 3

Hello

Thanks for responding. I have three issues. I need the hero to fit the entire image on desktop and mobile. Right now if I size the hero to fit desktop it doesn't fit mobile and vice versa.

I would like to make the menu bar transparent so that the hero image is the background behind the menu and logo.  

My web address is ya-amara.myshopify.com and password is yaamara123

Any help you can give would be much appreciated. 

 

best

Kale

0 Likes
SagarSukhanandi
Tourist
148 24 41

@Ya_Amara Add below style to css to fix hero issue

div#Hero-hero-1{
height: auto !important;
}
.hero__inner {
    display: contents;
    height: auto !important;
    width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
Ya_Amara
Tourist
8 0 3

Thanks so much! Where exactly should I paste the code? 

0 Likes
SagarSukhanandi
Tourist
148 24 41

This is an accepted solution.

@Ya_Amara 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
SagarSukhanandi
Tourist
148 24 41

@Ya_Amara Thank you for accepting my solution. It will be really helpful if you like all my messages. It will help me to built good profile.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
Ya_Amara
Tourist
8 0 3

Thanks ! It worked. Appreciate your help

Ya_Amara
Tourist
8 0 3

Hello of course I will. I injected the code but the logo I have centered is still white Can I make the logo background transparent as well?

 

Thanks

Kale

0 Likes