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

 

Replies 10 (10)

Zworthkey
Shopify Partner
5581 642 1565

hi,

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

and share your website Url.

thank you.

LO-KiStreetwear
Tourist
6 0 2

I have already provided a very detailed explanation and screenshots.

 

URL: LO-Kiconcepts.com

dmwwebartisan
Shopify Partner
12280 2546 3693

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
LO-KiStreetwear
Tourist
6 0 2

I sent you a PM for clarity!

dmwwebartisan
Shopify Partner
12280 2546 3693

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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!

dmwwebartisan
Shopify Partner
12280 2546 3693

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
LO-KiStreetwear
Tourist
6 0 2

@dmwwebartisan 

I have placed the code you provided back and enabled the content!

Apologies, I disabled it while I was awaiting a reply!

The banner and slideshow are being cropped between Desktop and Mobile still! It did make it a little better, but the issue still makes the content unuseable. 

Thank you again!

dmwwebartisan
Shopify Partner
12280 2546 3693

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
LO-KiStreetwear
Tourist
6 0 2

LO-KiConcepts.com 

 

Thanks in advanced!