Image in desktop is not fully fit compare to mobile view-debut theme

Store Design
1

Hi there,

I’m new here and I hope someone can help me.

I’m facing an issue with the image I upolaed on my website specifically in the slideshow- Debut Theme.

The mobile view is great, but the desktop looks zoomed in and most details missing.

Salem

2

Hi @salem

Please share your store URL and attached photo and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Thanks for replying back Avada team,

Can we send you our domain through email? we would like to keep it private.

Regards,

4

Hi @salem ,

My email:

amlibolikha@gmail.com

5

Hi Avada team,

We have forwarded you the link to our website.

Regards,

6

Hi @salem ,

Because your image is too small. So on a full desktop, resulting in a cropped image.

There is a way we will turn off crop mode and show the original image:

AvadaCommerce_0-1642133416501.png
AvadaCommerce_0-1642133416501.png1301×552 438 KB

If you do that, you can try following the instructions:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.slideshow__image {
    background-size: contain !important;
}
@media (min-width: 750px) {
    .slideshow__text-content.slideshow__text-content--vertical-bottom {
        bottom: 80px !important;
    }
}

I hope it would help you.

7

it’s almost there, just wonder if I can extend the length of the image to cover the white area.

Please check the attached photo.

8

Hi @salem ,

You try paste below code at the bottom of the file theme.css:

.slideshow__image {
    background-size: contain !important;
}
@media (min-width: 750px) {
    .slideshow {max-height: unset !important;}
}
1 Like
9

Thanks a lot that worked perfectly Avada team, is there any way I can control the width of the image, I feel that the image is way large in desktop view.

10

Hi @salem

At this css location:

AvadaCommerce_0-1642143490712.png
AvadaCommerce_0-1642143490712.png954×567 26.5 KB

max-height: unset!important;

You replace text unset by number * vw. Ex: max-height: 70vw !important.

NOTE: number range from 0 to 100