Solved

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

salem
Excursionist
13 0 8

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

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 956

This is an accepted solution.

Hi @salem 

 

At this css location:

 

AvadaCommerce_0-1642143490712.png

 

max-height: unset!important;

 

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

 

NOTE: number range from 0 to 100

banned

View solution in original post

Replies 9 (9)

AvadaCommerce
Shopify Partner
3879 839 956

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.

banned
salem
Excursionist
13 0 8

Thanks for replying back Avada team, 

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

Regards,

 

AvadaCommerce
Shopify Partner
3879 839 956

Hi @salem ,

 

My email:

 

amlibolikha@gmail.com

banned
salem
Excursionist
13 0 8

Hi Avada team,

 

We have forwarded you the link to our website.

 

Regards,

 

AvadaCommerce
Shopify Partner
3879 839 956

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

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.

banned
salem
Excursionist
13 0 8

 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
Shopify Partner
3879 839 956

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

 

 

banned
salem
Excursionist
13 0 8

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
Shopify Partner
3879 839 956

This is an accepted solution.

Hi @salem 

 

At this css location:

 

AvadaCommerce_0-1642143490712.png

 

max-height: unset!important;

 

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

 

NOTE: number range from 0 to 100

banned