Hello everyone,
I’m new to shopify. I love Dawn theme and online shop 2.0.
I just created a banner and it looks great on desktop. However, it is cropped on mobile. I have been searching solutions which suggested me to edit code in assets/base.css, Asset->/theme.scss.liquid, or theme.css. However, they did not work for me.
Any other suggestions? Thank you in advance.
My website:
scents.ltd
My shopify link:
https://scentsltd.myshopify.com/
Password: 123
My banner on desktop:
My banner on mobile:
@Scents_LTD - whats the password to view file?
I’m sorry, forgot to send. It’s “123”
@Scents_LTD - the issue is that if we make css adjustments then it will look like this , so I recommend to use separate images for desk and mobile and hide one as per the screen size
Thank you. What is the best way to use just 1 banner that fits for both desktop and mobile sites?
@Scents_LTD - check if customize settings have given you any recommended dimensions, else create image which will have vertical alignment of content so it does not get cut on sides
Hi @Scents_LTD ,
Code will not be able to fix your issue. I would recommend to assign a different size of image in your mobile specifically, landscape for desktop, and portrait for mobile. See image below. To do that use the video tutorial below to add this feature to your sections.
This is a standard for all free themes banner sections, unfortunately.
If you do need images that won’t cut off, there are alternatives like this copy/paste section that may help you out and are fully compatible with the Dawn theme.
They come with a built-in option to “uncut” the images, so all of your image is displayed regardless of its size. Although it’s a slideshow you can also use it as a banner.
Kind regards,
Diego
