Solved

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

canisinfernalis
Visitor
3 0 0

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.

canisinfernalis_0-1682268256303.png

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

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3465 460 515

This is an 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) 

view (65).png

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

view (64).png

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

view (63).png

 

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.

view (62).png

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 8 (8)

zaczee
Globetrotter
848 46 42
 
We need to create separate image upload options for mobile and desktop. To create this we need to customize the slider.liquid code.
 
canisinfernalis
Visitor
3 0 0

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

BSS-Commerce
Shopify Expert
3465 460 515

This is an 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) 

view (65).png

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

view (64).png

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

view (63).png

 

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.

view (62).png

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

canisinfernalis
Visitor
3 0 0

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
Visitor
1 0 0

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
Shopify Expert
3465 460 515

Hi @canisinfernalis 

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

view (89).png


Then our store interface looks like this

 

view (90).png

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

view (92).png

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-Commerce
Shopify Expert
3465 460 515

Hi @canisinfernalis 

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

view (96).png

Then our store interface looks like this

view (97).png

 

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

view (98).png

On our desktop and mobile screens

view (99).png

view (100).png

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

homhouseholdph
Visitor
1 0 0

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!