I want to change the position for this on mobile

Shopify Discussion
1

[URGENT] I have this small image which changes images when you hover over it. On desktop the positioning is fine however on Mobile the position stretches the page and looks weird. In this photo i have an arrow pointing to the position i want this to be (NOT EFFECTING DESKTOP POSITION). Please can someone help me fix this? it is highly appreciated :heart:

SHOP URL: https://c1e46d.myshopify.com/collections/all

ov.png
ov.png1416×1421 129 KB

2

Please put in below code to the last line of base.css

by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder. (https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code)

@media screen and (max-width: 500px) {
  .footer__newsletter .newsletter-form__field-wrapper:after {
    transform: none;
    top: 50px;
    left: 0;
  }
}
3

Hello @suoshie ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

  2. Open your theme.liquid theme file

  3. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

4

Hello @suoshie ,

To resolve this, add the below-provided code at the end of your theme.css or base.css file.

@media screen and (max-width: 500px) {

.footer__newsletter .newsletter-form__field-wrapper:after {

transform: none;

top: 25%;

left: 0;

}

}

Then check the output.

Cedcommerce_0-1676906220880.png

image.png

Hope this helps. Let us know if you need any further help with this.

All the best,

CedCommerce