Dawn Theme: Moving Sustainability Badge On Website Using Code - Need Guidance

[oliverconscire]

Hello, everyone! I’m reaching out for assistance with a website issue. I’m trying to move my sustainability badge on mobile to the bottom right corner, just like it appears on the desktop version. However, I’ve encountered difficulties when attempting to make this adjustment specifically only for the mobile version using different codes. I’ve attached some images to below a visual reference. Any help would be greatly appreciated!

Here’s my current code for the badge:

[suyash1]

@oliverconscire - can you please share this page link?

[PageFly-Lucas]

Hi @oliverconscire

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media only screen and (max-width: 589px)

a[href=“https://packhelp.co.uk/sustainability//?utm_source=ecobadge&utm_medium=online&utm_campaign=eco”] img {

margin-top: 700px;

}

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[oliverconscire]

@suyash1 Absolutely.
https://conscire.co.uk/
Password: Conscire9898!

@PageFly-Lucas Thanks. Just followed your instructions but it doesn’t work for me unfortunately.

[PageFly-Lucas]

Hi @oliverconscire

Please try again with this code:

@media only screen and (max-width: 589px){
a[href=“https://packhelp.co.uk/sustainability//?utm_source=ecobadge&utm_medium=online&utm_campaign=eco”] img {
margin-bottom: -100px !important;
}
}

[suyash1]

@oliverconscire - please add custom class to your code above so it becomes

[
![custom packaging](https://packhelp-landing-static.s3.eu-central-1.amazonaws.com/sustainability/eco-badge-color-white.p...)

](Sustainability Hub | Packhelp)

and then add this given css to the very end of your base.css file

@media screen and (max-width:749px){
.custom_badge{top: 0 !important; left: -5% !important; transform: translate(15%, -60%) !important;}
}

should look like this

[oliverconscire]

@suyash1 Thank you that’s exactly the placement I’m looking for.

I’m not quite sure how to get it right though.

This is my bottom base.css @media only screen and (max-width: 600px){
a[href=“https://packhelp.co.uk/sustainability//?utm_source=ecobadge&utm_medium=online&utm_campaign=eco”] img {
margin-bottom: -100px !important;
}
}

Where exactly should I paste the code you mentioned? Thank you for your time here.

@PageFly-Lucas Thank you sir. Now I just need to place it in the bottom right corner.

[suyash1]

@oliverconscire - please replace your html with my html code, I added class to it and irrespective of the existing code in base.css , add my given css after it

[oliverconscire]

@suyash1 Like this? I apologise for my rookie coding skills.

[suyash1]

@oliverconscire - no, please add only css code to end of base.css file… add my given html code in the place of your html code below, replace below code with my

[oliverconscire]

@suyash1 I’m slightly confused since I have the code in both theme.liquid and base.css.

Here’s the code in my bottom theme.liquid

And here’s the code in base.css

@media only screen and (max-width: 600px) {
a[href=“https://packhelp.co.uk/sustainability//?utm_source=ecobadge&utm_medium=online&utm_campaign=eco”] img {
margin-bottom: -100px !important;
}
}
.header__icon {
color: #dcc9b6 !important;
}
.list-social__link {
color: #dcc9b6 !important;
}

Could you please show me exactly where I should paste this code? Thank you for your patience.

[suyash1]

@oliverconscire - add the HTML code below in place of html code which you have in theme.liquid file after

[
![custom packaging](https://packhelp-landing-static.s3.eu-central-1.amazonaws.com/sustainability/eco-badge-color-white.p...)

](Sustainability Hub | Packhelp)

and then add this given css to the very end of your base.css file

@media screen and (max-width:749px){
.custom_badge{top: 0 !important; left: -5% !important; transform: translate(15%, -60%) !important;}
}

[oliverconscire]

@suyash1 Thank you. Placement is correct, however, the badge is not visible now. Should I keep my current code in theme liquid or replace it with your code? I’ve tried both variations placed after but it doesn’t seem to work. My theme liquid is now back to the original one but I have added the base.css code you just provided.

[suyash1]

You will need to replace old code with my, and then add given CSS to the
end of base.css file

[oliverconscire]

@suyash1 Like this?

[suyash1]

@oliverconscire - only recommendation is that please move that tag and place it just before and everything should be ok

[oliverconscire]

@suyash1 Thank you for your reply.
It looks like this.

[oliverconscire]

This is shown on desktop.

[suyash1]

@oliverconscire - check image URL, may be image is removed or broken at that place

[GreenifAI-Shopping]

Could you share how you’re currently adding the badge code to your theme? Sometimes the placement depends on whether it’s inside a section, block, or theme file. I might be able to suggest a more precise fix if I know where it’s coded