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

[salem]

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

[AvadaCommerce]

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.

[salem]

Thanks for replying back Avada team, 

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

Regards,

[AvadaCommerce]

Hi @salem ,

My email:

amlibolikha@gmail.com

[salem]

Hi Avada team,

We have forwarded you the link to our website.

Regards,

[AvadaCommerce]

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:

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.

[salem]

 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. 

[AvadaCommerce]

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;}
}

[salem]

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.

[AvadaCommerce · Accepted solution]

Hi @salem 

At this css location:

max-height: unset!important;

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

NOTE: number range from 0 to 100