Image and text sizing error on mobile only

Highlighted
New Member
3 0 0

Hello. I am having an issue with the very first pic at the top on my website's homepage, but only in the mobile view. The desktop image shows in full and looks great, but the mobile view cuts off the sides of the image. Can anyone help me get this full image to display in the mobile view? Also to mention, I've changed the picture several times to see if it was the image itself, but every photo I've uploaded gets cut off.

As for the header, the word "boutique" in my store name gets broken up unto two lines in mobile view...the "e" shows up on the second line instead of on the first with the rest of the word's letters. Can someone please tell me what I am doing wrong?

My website is: boutiquemebydee.com

 

Thank you!

0 Likes
Highlighted
Shopify Partner
449 58 71

@BoutiqueMEbyDee , try adding this code to the very bottom of your theme.scss.liquid Asset:

/*  make the hero scale, not crop on resize */
div#shopify-section-hero {
    position: relative;
    padding: 40% 0 0 0;   
    /* aspect ratio of images -- width/height, change percentage as required */
    /* 40% is for 1920x768, for example */ 
}
.hero.ratio-container {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
}
.hero__inner {
    position: absolute;
    display: table;
}
.hero__inner > div {
    display: table-cell;
    vertical-align: middle;
}

Do not forget to make a backup theme copy before editing via Actions->Duplicate.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
3 0 0

That ALMOST worked! The header is perfect now. But the photo, instead of it being cut of on the sides, the bottom is cut off now on BOTH the desktop and mobile view. Any other ideas?

0 Likes
Shopify Partner
449 58 71

Play around with percentage based on the pixel size of the image to see what works best. This is a work around.

Default behaviour is by design for theme to crop from both side on mobile.

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Shopify Partner
1359 184 433

This is such a common question that comes up and people don't seem to understand why they can't just have the exact same image that they have on desktop show up on mobile. Here's a codepen kind of showcasing the problem.

https://codepen.io/ninthony/pen/oNboYoJ

The dimensions for a phone are completely different than they are on desktop. You can see in the codepen the first block is a "phone" dimension with the image constrained to the size of the container. It's super tiny, not what anyone wants. The second block is a "desktop" dimension that constrains to the container. Looks great, because it's the proper dimensions. If you want to have your image retain it's height that it appears on desktop, then you need to sacrifice the sides of the image by setting the container's overflow to hidden and then positioning the image with CSS. 

The best solution in my opinion, is to design two completely different images. One that serves on mobile that is designed  for mobile, and one that serves on desktop that is designed for desktop using css media queries.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
New Member
2 0 0

I am new, and have a problem with SVG logo in header. How can I send a personal message for help?

0 Likes
Highlighted
New Member
3 0 0

ok, thank you. So how do I create two different images within shopify? One for mobile and one for desktop. I was previously told that this was not any option. How do you do it?

0 Likes
Highlighted
Shopify Partner
1359 184 433

It's possible, it's just not a built in functionality, you have to know your way around HTML, CSS, and Liquid -- 

In your section, there is a bunch of settings in between tags at the bottom of the file:

{% schema %}

// code for settings in your customize editor

{% endschema %}

Everything in those tags pertains to a setting that you can set through the customize editor, for instance you have an image picker to select your hero image. 

 

Anyway it's kind of a lot to explain. I'll provide you with some simple code that's going to let you do what you want, but this is in no way optimized for web. The pictures will be displayed in their actual dimensions, not be served according to screen resolution or width. I'd suggest 1920x1080 for desktop and 767x1290 for mobile. You will have to set an image for both desktop and mobile for the section to appear on your homepage. Go into Online Store > Themes > Actions > Edit Code on the theme that you want to edit. Create a new section called "desktop-mobile-banner". Copy and paste this code and save it:

<style>
.banner-container img{
  width: 100%;
}
.hidden-mobile {
  display: none;
}
.hidden-desktop {
  display: block;
}
@media (min-width: 767px){
  .hidden-mobile {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
  <img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
  <img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

Then go into your customize editor and click "Add Section" and scroll to the "Image" category, you should see a section named Desktop Mobile Banner -- click it and then upload both your desktop and mobile banner images. Then you can drag it wherever you want it to appear on your homepage. This will meet your basic needs. You can further customize the schema to give yourself more options, here's some documentation on how to configure the schema and the types of settings you can use in the schema settings:

https://shopify.dev/tutorials/develop-theme-use-sections

https://shopify.dev/docs/themes/sections/content-schema

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes