Dawn theme mobile version, banner gets cropped and product pictures are too small

[canisinfernalis]

Hello,

I am quite happy with the desktop version of the shop, but I am struggling to make my it look alright on mobile. I am using the Dawn theme.

https://canis-infernalis.myshopify.com/

https://canis-infernalis.myshopify.com/collections/all

The banner in the home page gets cropped and loses image quality in the mobile version.

In the catalog and collection pages, the product pictures turn really small on mobile, and the text and prices look unreadable. 

Would appreciate any help with this! Thanks in advance

[zaczee]

Hi @canisinfernalis 

We need to create separate image upload options for mobile and desktop. To create this we need to customize the slider.liquid code.

[canisinfernalis]

Thanks, any idea what code should be written? I unfortunately don't know much about this!

[BSS-Commerce · Accepted solution]

Hi @canisinfernalis 

There are 2 issues that need to be addressed, namely:

1. The banner in the home page gets cropped and loses image quality in the mobile version. In your theme code, specifically in the section-image-banner.css file in the assets folder (min-height: 28rem) 

 

the base.css file in the assets folder (object-fit: cover).

Note that the value "cover" in the object-fit attribute means that the image keeps its aspect ratio and fills the given dimension, but may be clipped to fit. This is what causes the image to be too large and lose quality on mobile devices.

My suggestion for this issue on mobile screens is as follows:

1. Go to Themes -> Edit Code

2. Find the base.css file and add the following CSS at the end:

  @media screen and(max-width: 670px){
            #Banner-template--14705701552266__image_banner {
                height: 21rem !important;
            }

            #Banner-template--14705701552266__image_banner .banner__buttons {
                position: relative;
                top: -20px;
            }


            #Banner-template--14705701552266__image_banner .button {
                font-size: 1rem !important;
                min-width: calc(10rem + var(--buttons-border-width) * 2) !important;
                min-height: calc(2.5rem + var(--buttons-border-width) * 2) !important;
            }
        }

        @media screen and(max-width: 540px){
            #Banner-template--14705701552266__image_banner {
                height: 18rem !important;
            }

            #Banner-template--14705701552266__image_banner .banner__buttons {
                position: relative;
                top: -42px;
            }

            #Banner-template--14705701552266__image_banner .button {
                font-size: 1rem !important;
                min-width: calc(10rem + var(--buttons-border-width) * 2) !important;
                min-height: calc(2.5rem + var(--buttons-border-width) * 2) !important;
            }
        }

Regarding the issue of image quality degradation when scaling, I can tell you that it is a common occurrence when images are resized, even though the object-fit attribute can minimize it. However, you can do better by:

• Using separate product images for desktop and mobile layouts to avoid resizing
• Using appropriate image formats for the content and display size of the website. For example, use JPEG format for images with many details and PNG format for transparent or text-containing images.

1. In the catalog and collection pages, the product pictures turn really small on mobile, and the text and prices look unreadable. I noticed that the homepage layout is quite responsive, with the list product layout divided into 4 columns, 3 columns, or 2 columns depending on screen size. However, on the collection page, the layout always remains as 4 columns even when the screen is narrowed, which makes the space for each product too small and makes the image and product information too small to read.

I found the CSS code that causes this issue.

 

So, if possible, please go to base.css and remove that code. After that, your collection page will change its layout to 3 or 2 columns on smaller screens.

[canisinfernalis]

Amazing, thank you so so much!! That fixed the issue with the smaller images and unreadable text in the mobile version.

Regarding the banner: 

• Using separate product images for desktop and mobile layouts to avoid resizing

How can I upload a separate image for the mobile version? I only see the option to upload 1 picture.

[printedcult]

hi, i copied the code and pasted at the bottom of base.css file and saved it, refreshed my website and opened it on my mobile, nothing changed. the problem still remained. may i know if there is any other way to downsize the banner image t make it mobile responsive?

[BSS-Commerce]

Hi @canisinfernalis 

At Image banner in customize theme, I see it has 2 image upload items, and I tried

Then our store interface looks like this

Assuming image #1 is the desktop banner and #2 is the mobile banner image, on each device, only one image will be displayed.
Let's add some css in theme.css

Updating Media

On my desktop and mobile screens

 

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps

[BSS-Commerce]

Hi @canisinfernalis 

At the Image banner in customize the theme, we see it has 2 image upload items, and we tried

Then our store interface looks like this

Assuming image #1 is the desktop banner and #2 is the mobile banner image, on each device, only one image will be displayed.
Let's add some css in theme.css

On our desktop and mobile screens

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps

 

[homhouseholdph]

Hi @BSS-Commerce we're also having this problem where the banner is cropped on mobile view. 

I cannot seem to find the code to be added here to be able to upload a separate mobile banner. Can you assist? And do you know the acceptable size for mobile banner image? Thank you so much!