Banner image changing size on preview

[HYBRID]

Hi

I’m trying to get the banner image on my website to look the same as it does when it’s on my admin page. If you look at the images attached, you can see that the image is more zoomed (and cropped) when viewing the desktop website as opposed to when in admin. Can this be fixed so i can view the image without zooming or cropping?

Can i also choose which part of the banner will be seen on the mobile version?

Thanks

[Huptech-Web]

Hey @HYBRID , Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

Thank You
K.K

[HYBRID]

Hey Rish

The store is still being built so it’s not published as yet. Sorry

[HYBRID]

I’ve published the store now so you guys can see

www.littlepiggles.com

[HYBRID]

There’s also a yellow alert trianlgle beneath the price of every product. Could you tell me what this is and how to remove it?

Thank you

[Huptech-Web]

@HYBRID This triangle show the product is low in stock

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

Thank you
K.K

[Huptech-Web]

Hello! @HYBRID Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

body .ml_img_banner_wrapper_template--23236456710489__image_banner_DBaEHQ .ml_img_banner{
    max-height: 80vh !important;
}
body .ml_img_banner_img {
    width: 100%;
    padding: 0 !important;
    height: 80vh !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

[HYBRID]

Thank you so much Rish. You have solved the image problem. I will mark this as a solution in a moment, could i just ask how to remove the low stock warning? i have set stock not to track but it still shows. My theme is Kairo if that helps

[HYBRID]

I figured out how to remove the warning. Am I able to ask you how to add a back button using the same font and colours as my theme or should i create a new thread?

[Huptech-Web]

Hello! @HYBRID Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

.ml_stock {
    display: none;
}

If you require further assistance, please let me know. If you found my help useful, please consider liking this message and marking it as the solution for all answers .
Thank you
K.K