Shopify themes, liquid, logos, and UX
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)
hi,
We are happy to help you please elaborate on what you exactly want.
and share your website Url.
thank you.
I have already provided a very detailed explanation and screenshots.
URL: LO-Kiconcepts.com
I can't inspect your website elements, can you please check?
I sent you a PM for clarity!
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!
That definitely helped the desktop version, but still experiencing some cropping on mobile!
Thanks for helping, hope we can get this resolved!
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.
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!
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
LO-KiConcepts.com
Thanks in advanced!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024