Different banner sizes for desktop and mobile/or give crop instructions?

Store Design
,
1

Hi, I am trying to find out if it is possible to have a desktop banner image, and mobile image banner in the new Dawn?

If not, is it possible to add instruction on how to present for mobile? For example, the attached image would appear like as is for desktop, and would essentially break in half for mobile with the left side top, and right side bottom and copy would go on top.

LIVINGSIMPLY_0-1691607659747.png
LIVINGSIMPLY_0-1691607659747.png1452Ă—590 385 KB

LIVINGSIMPLY_1-1691607731493.png
LIVINGSIMPLY_1-1691607731493.png800Ă—1180 118 KB

1 Like
2

Hi @LIVINGSIMPLY

Can I take a look? Would you mind to share your store URL website? with password if its protected. Thanks!

3

Of course, shoplivingsimply.com I have 3 pages with banners like this that need some help.

1 Like
4

Thank you for the information. Which page I can find this banner design?

5

I am not a designer or developer, I am just trying to get this wrapped up, I think the problem is I need the site optimized, and mobile optimized, I thought it was, but I don’t think it was fully done. Could this have anything to do with HTML that google says I need?

Both the home page, https://shoplivingsimply.com/pages/simply-sleep-launch-offer

and

https://shoplivingsimply.com/pages/simply-focus-limited-offer

1 Like
6

Lets try to play with css. If this wont work then I would advice to hire a developer.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 749px){
.banner__media.media.scroll-trigger.animate--fade-in img {
    display: none;
}
.banner__media.media.scroll-trigger.animate--fade-in:before {
    content: "";
    display: block;
    background-image: url('mobile-image.jpg');
    background-size: cover;
    background-position: center;
}
}

In the background image code place the image URL that for the mobile banner.

7

I don’t have a place for background images, it is not an option in my Dawn, but there is a second image option, but it is for two images together, maybe that’s what I can do, and stack them? But that seems like a pain every time I need a new banner

1 Like
8

I just played the size of the banner, and this should work for now. I need figure how to make the rest of the site look good in mobile and not so small. If you see, everything is very small on my phone. I tried a larger phone as well and it was the same size.

LIVINGSIMPLY_0-1691615664327.jpeg
LIVINGSIMPLY_0-1691615664327.jpeg1179Ă—975 71.1 KB

LIVINGSIMPLY_1-1691615731289.png
LIVINGSIMPLY_1-1691615731289.png1179Ă—2556 240 KB

9

I can suggest that better to use this one.

10

I tried a different code in section-image-banner.css file from another post and it seems like it’s halfway there, but it is not showing up in mobile. Here is the post.

https://community.shopify.com/c/shopify-design/dawn-theme-upload-separate-banner-image-for-mobile/m-p/1685313#M450427

11

I also added this, and in customize mode I see the second the image when I click mobile. But when I go use it on my mobile it does not populate.

@media screen and (max-width: 749px){
#Banner-template–17346479128890__image_banner .banner__media::before{padding-bottom: 0 !important;}

#Banner-template–17346479128890__image_banner .banner__media .banner__media-image-half{ position: relative !important;}
}