[URGANT] I want to remove this on mobile version only

Shopify Discussion
1

(URGANT PLEASE HELP) On desktop i have a small image next to my newsletter box which i want to keep. However i want to remove it on mobile version because it dosent fit nicely. How do i do this? Please help me i have been trying to remove it on mobile for a long time.

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

Incase you need it to figure this out here is the code i used to put it on my website:

.footer__newsletter .newsletter-form__field-wrapper:after { content: ""; background: url([https://cdn.shopify.com/s/files/1/0711/6079/1356/files/lolga.png?v=1676816746](https://cdn.shopify.com/s/files/1/0711/6079/1356/files/lolga.png?v=1676816746)); background-size: contain; background-repeat: no-repeat; background-position: center; width: 134px; height: 154px; position: absolute; right: 6px; transform: translate(100%, -72%); top: 50%; } .footer__newsletter .newsletter-form__field-wrapper:hover:after { background: url([https://cdn.shopify.com/s/files/1/0711/6079/1356/files/ilya.png?v=1676816747](https://cdn.shopify.com/s/files/1/0711/6079/1356/files/ilya.png?v=1676816747)); background-size: contain; background-repeat: no-repeat; background-position: center; }

ic.png
ic.png802×447 22.2 KB

@GemPages

2

The right way to do this would be to add media queries for that.

@media only screen and (max-width: 767px){
...
}

The example below shows a media query wrapping the style. Now you could also just add this code as is and paste to the very bottom of your css file. It would work - just adds more lines of code.

@media only screen and (max-width: 767px){
  .footer__newsletter .newsletter-form__field-wrapper:after{
    display:none
  }
}

Depending on what you consider mobile you may want to adjust that 767px value.

If you have a high user base of mobile users you may want to rethink hiding it and adjusting the layout so it fits in some way. I’m assuming you’ve added it to help that signup conversion.

3

Hi thanks for the help! In that case im thinking of moving the mobile position similarly to where the red arrow is pointing to in this photo. Please could you help me do that? It would be highly appreciated :heart:

ov.png
ov.png1416×1421 129 KB

4

Hi @suoshie ,

Glad to support you today.

You can try to add my code to fix the position of that icon:

@media(max-width: 767px) {
	.footer__newsletter .newsletter-form__field-wrapper:after {
		  transform: translate(-50%, 0%) !important;
    		left: 50% !important;
	}
	.footer__list-social.list-social {
		margin-top: 10rem !important;
	}
}

It show like this when you add my code:

GemPages_1-1676874450477.png
GemPages_1-1676874450477.png417×547 14.3 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

5

where do i paste this code?

6

i posted the code here on theme.liquid but it dosent make any changes. Where should i paste it?

theme.png
theme.png918×431 18.3 KB

7

Hi @suoshie ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    .footer__newsletter {
        padding-bottom: 100px;
    }
    .footer__newsletter .newsletter-form__field-wrapper:after {
        top: auto !important;
        bottom: 0 !important;
        right: auto !important;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
    }
    .footer__list-social.list-social {
        margin-top: 10px;
    }
}

PageFlyRichard_0-1676901725360.png
PageFlyRichard_0-1676901725360.png410×427 12.5 KB

I hope it would help you
Best regards,

Richard | PageFly