Large image with text shows a big space in mobile version

Store Design
1

Hey guys, so I have this big space in the mobile version after the image with text, what can I do. Can you please help?

IMG_7440.jpg
IMG_7440.jpg1284×2046 123 KB

1 Like
2

Hello There,

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

3

https://www.luluabeauty.com

Thank you!

1 Like
4

@Iamheretoo

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

@media only screen and (max-width: 589px){
.animation-cropper {
    overflow: hidden;
    display: block;
    width: 100%;
    text-align: center;
}

.background-media-text__text {
    margin: 0 auto !important;
    text-align: center !important;
}
}

Thanks!

5

Do you want to add text on that space?

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.background-media-text .animation-cropper {
width: 10;
display: block;
width: 100%;
text-align: center;
}
.background-media-text .animation-cropper .background-media-text__text {
text-align: center;
}
7

desktop
desktop1437×704 123 KB

mobile
mobile1125×1718 112 KB

so there is still a gap in the mobile version, smaller for sure, and for desktop, it places on the top left, different from the initial right-hand side to match with the ad.

8

@Iamheretoo

what do you want Exactly? Please share a screenshot.

Thanks!

9

mobile
mobile1284×1948 120 KB

desktop
desktop1425×777 155 KB

so in the mobile version, there is a big gap which I try to remove by extending the button or just not to look like this. In the desktop version the image is slightly cut in the lower part and I am trying to fit in.

10

thank you for trying to help :slightly_smiling_face:

11

@Iamheretoo

Solution for desktop

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

@media only screen and (min-width: 590px){
.background-media-text--right .animation-cropper {
    float: left !important;
}
}
1 Like
12

@dmwwebartisan

mobile
mobile1125×1462 82.4 KB

there is just a little gap left up and down

1 Like
13

@Iamheretoo

Solution for mobile

@media only screen and (max-width: 589px){
.background-media-text__aligner {
    margin: -40px -11px 0px !important;
}
}
14

@dmwwebartisan

with the last solution is back to the initial error

15

IMG_4032.jpg
IMG_4032.jpg1125×1500 89.7 KB

showing like this

16

@Iamheretoo

Try this code for mobile

@media only screen and (max-width: 589px){
.background-media-text__aligner {
    margin: -40px -11px 0px !important;
}
.animation-cropper {
    display: block !important;
}
.background-media-text__text {
    margin: 0 auto !important;
    text-align: center;
}
}
1 Like
17

@Iamheretoo

If helpful then please Like and Accept Solution

Thanks!

18

@dmwwebartisan thank youuuuuu! it works for the mobile

1 Like
19

@Iamheretoo

Solution for desktop .

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

@media only screen and (min-width: 590px){
.background-media-text--right .animation-cropper {
    float: left !important;
}
}

Thanks!

20

@dmwwebartisan

unfortunately, this doesn’t work. it just put the button on the left, however, I nailed it from editor mode.

Thank you so much for the mobile version.