How can I adjust image with text overlay for mobile without white spaces?

Store Design
1

Hello!

Please help, I am trying to get my image with text overlays to adjust to any size screen, I used previous feeds to fix the sizing but now there is this white space on the sides for each image with text overlay. I would like to just get rid of the white spaces on the sides!

Screen Shot 2022-02-22 at 6.28.50 PM.png
Screen Shot 2022-02-22 at 6.28.50 PM.png1009×417 180 KB

Mahalooo!

2

Hi,

Can you give me the URL of site?

Thank,

3

Yes!

https://sun-daes.myshopify.com/

4

Hi,

Pls, give me password to access your store :).

5

Oh yes yes haha thank you. It is Sun.daes!

6

Hi,

Pls, add this code to file CSS:

.template-index #shopify-section-hero-1 > div {
    position: relative;
}

.template-index #shopify-section-hero-1 > div:after {
    content: "";
    position: absolute;
    left: 0;
    background: #fdf6ed;
    width: 50%;
    top: 0;
    bottom: 0;
}

.template-index #shopify-section-hero-1 .hero {
  z-index: 1;
  background-color: transparent;
}

.template-index #shopify-section-hero-1 > div:before {
    content: "";
    right: 0;
    background: #efa593;
    width: 50%;
    top: 0;
    bottom: 0;
    position: absolute;
}

Then clear cache browser to view it :D. https://ibb.co/82sphDQ

7

Yayy thank you SO much!

8

Yayy it worked for the banner, so sorry but I should have specified that I wanted it for all of the images with text overlay! These two as well please!

Screen Shot 2022-02-23 at 8.04.05 AM.png
Screen Shot 2022-02-23 at 8.04.05 AM.png362×157 28.2 KB

Screen Shot 2022-02-23 at 8.03.57 AM.png
Screen Shot 2022-02-23 at 8.03.57 AM.png363×176 48.6 KB

9

Hi,

Pls, add this code CSS

div#Hero-163763187288326e2f {
background-color: #efa593;
}
div#Hero-hero-2 {
background-color: #bb4c2d;
}

I hope this can help you!

Thank,

10

OMG you are the BEST! Thank you so much. Sorry so late I am finally getting back to trying to work on my website!