CENTRE ALIGN NEWSLETTER MSG AND BOX ON DESKTOP AND MOBILE

Store Design
, ,
1

Hi, I’d like to centre my newsletter box and the message above it centred on the desktop and mobile versions both. Currently is off the centre. In the mobile view it’s completely off. I can’t figure out which footer file and where do I need to make the correction to get this rectified.

website : www.slidein.co.in

1 Like
2

Hi @slidein_india

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 750px) {
    .footer-block__newsletter:not(:only-child) {
        text-align: center;
        margin-right: auto;
    }
    .footer-block__newsletter {
        margin: 0;
}

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    width: 80%;
    justify-self: end;
    gap: 0;
}

form#ContactFooter {
    justify-self: center;
}
}
.footer-block__newsletter {
    margin-left: 0rem !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @slidein_india

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
.footer-block__newsletter h2.footer-block__heading {
    text-align: center;
}
.footer-block__newsletter > form {
    margin-inline: auto !important;
}
.footer-block__newsletter {
    margin-left: 23rem !important;
}
}

Here is the result: https://prnt.sc/tcS08KZun0vH

I hope this helps

Best,

Daisy

4

Hi, thanks for your reply. I followed the steps but the centre alignment still isn’t happening.

5

Hi @slidein_india

Please try this code

@media screen and (max-width: 768px){
.footer-block__newsletter {
    margin-left: 0 !important;
}
}
@media screen and (min-width: 1024px){
.footer-block__newsletter h2.footer-block__heading {
    text-align: center;
}
.footer-block__newsletter > form {
    margin-inline: auto !important;
}
.footer-block__newsletter {
    margin-left: 23rem !important;
}
}

Best,

Daisy

1 Like
6

Thanks, this worked as the solution when I pasted it in the email-sign up banner css under assest folder. Thanks again for the help.

7

Hi, update, it was working fine in the mobile view section of customization but in real time on the website the alignment is still an issue. Desktop view has the problem solved but mobile view the problem still presists.

8

this is perfect. It has centre aligned it in both desktop and mobile view. Thanks a ton.

9

This is on my end.

Made4uoRibe_0-1734900887203.png
Made4uoRibe_0-1734900887203.png630×801 43.1 KB

What device your using?

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!