Slideshow Banner/Full Width - Image cropping issues between Mobile / Desktop - Debut Theme

LO-KiStreetwear
Tourist
6 0 2

Looking for some assistance with my image cropping issues on the Debut Theme! I have tried modifying my images to the recommendations of Shopify for slideshow images in the Debut theme and to no surprise, it made no improvement to the issue.  

I'm trying to use some images that are 1280 x 720 pixels to give an explanation of the brand in a slideshow. ( I have already tried 1200 x 600, no improvement) I have also ensured all the images for the slideshow are the same size and attempted to use the "adapt to first image" and "middle center" image positions to assist and still no luck. (I have also tried other image sizes and positions, still the issue persists) 

I prefer for the slideshow to be banner width and cover the entire page while also adapting the page for mobile/desktop use so that the entire image is scaled/shown without cropping or pixel blurring. I would love for the slideshow to be the full width of the page and show the ENTIRE image as I've spent time designing these. 

I'm more than happy to pay for the assistance if the work comes out stellar!

Thank you! Attaching images as an example (note- This is not added to my store at the moment because of the poor presentation of this) 

Cropping on MobileCropping on MobileCropping on DesktopCropping on DesktopFULL IMAGE (All images are the same size 1280 x 720FULL IMAGE (All images are the same size 1280 x 720

 

0 Likes
Zworthkey
Trailblazer
199 11 45

hi,

We are happy to help you please elaborate on what you exactly want.

and share your website Url.

thank you.

dmwwebartisan
Shopify Partner
4453 1002 1276

@LO-KiStreetwear 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
LO-KiStreetwear
Tourist
6 0 2

LO-KiConcepts.com 

 

Thanks in advanced!

0 Likes
LO-KiStreetwear
Tourist
6 0 2

I have already provided a very detailed explanation and screenshots.

 

URL: LO-Kiconcepts.com

dmwwebartisan
Shopify Partner
4453 1002 1276

@LO-KiStreetwear 

I can't inspect your website elements, can you please check?

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
LO-KiStreetwear
Tourist
6 0 2

I sent you a PM for clarity!

dmwwebartisan
Shopify Partner
4453 1002 1276

@LO-KiStreetwear 

Please add the following code at the bottom of your assets/theme.css or theme.scss.liquid file.

@media only screen and (max-width: 749px){
.main-content {padding-top: 0px !important;}
#shopify-section-hero .page-width {max-width: 100% !important;padding: 0px !important;}
}

@media only screen and (min-width: 750px){
.main-content {padding-top: 0px !important;}
#shopify-section-hero .page-width {max-width: 100% !important;padding: 0px !important;}
}

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
LO-KiStreetwear
Tourist
6 0 2

That definitely helped the desktop version, but still experiencing some cropping on mobile!

 

Thanks for helping, hope we can get this resolved!

0 Likes
dmwwebartisan
Shopify Partner
4453 1002 1276

@LO-KiStreetwear 

Did you put that the code above I have given? If the code is there then I can see this case for the mobile and make corrections accordingly.

Let me know.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes