Debut Theme Mobile View: Image with Text Overlay Issue

Store Design
1

Hi Shopify Community! How can I adjust this photo so that the whole image is seen on mobile while not affecting the desktop view? because it’s already fine when in laptop. Any help would be appreciated, thanks in advance!

Screen Shot 2022-04-08 at 1.11.29 PM.png
Screen Shot 2022-04-08 at 1.11.29 PM.png606×938 666 KB

2

@ViperArms

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

3

Thank you!

viperarmstactical.myshopify.com

4

@ViperArms

Please add the following CSS code to your assets/theme.css bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero {background-size: contain;}
#shopify-section-hero-1 .mega-title--large {font-size: 1.2em;}
}

Thanks!

5

Hi, sorry for the late response. I tried it and it works! But it left a gray section maybe because of the desktop layout settings. Is there any way to stretch the image to fill the space (without the image being affected) or atleast just to remove the gray spaces completely? Your help would be really appreciated.

6

@ViperArms

Kindly Share a screenshot of it,
Where is the Grey Spaces,
So that i can help you to fix it, out

7

@ViperArms

There is no way to properly stretch the images; unfortunately the Debut theme’s slider is not renowned for its mobile design.

The best you can do is something like this:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 749px){
    .hero{
    max-height: 62vw;
}
}

There are also some other options available in case you need a more professional/mobile friendly Slideshow section, like this.

I hope this helps.

Kind regards,
Diego

8

Oh, I thought I included it in my comment lol, here it is:

Screen Shot 2022-04-08 at 2.42.41 PM.png
Screen Shot 2022-04-08 at 2.42.41 PM.png606×934 336 KB

9

@ViperArms

Please take a look at the previous answer, let me know if it doesn’t work.

Kind regards,
Diego

10

@ViperArms

@media only screen and (max-width: 749px)[
#shopify-section-hero-1 .hero {
    background-size: none !important; 
}
.hero--x-large {
    height: 475px !important;
}
}

Add this code in the theme.css or theme.scss file.

11

Hi Diego, I tried your solution and it worked! Thank you for helping me out, I really appreciate it. Also, the EZFY app you recommended seems cool, I’ll try that one out.

12

I tried it both with and without the other codes but unfortunately, it didn’t work for me. Thanks for taking the time to help me out though, I really appreciate it.

13

I just noticed I didn’t thanked you properly, that was on me. Thanks for helping me adjust the home page photo so it would fit for mobile view, I really appreciate it!

14

Thank you guys for the help! I didn’t expect the responses to be that fast so I’m grateful for that. I hope all of you have a great day!