CENTRE ALIGN NEWSLETTER MSG AND BOX ON DESKTOP AND MOBILE

Store Design
, ,

Topic summary

A Shopify store owner needs help center-aligning their newsletter signup box and message on both desktop and mobile views, as it currently appears off-center.

Solutions Provided:

Two community members offered CSS code solutions:

  • Made4uo-Ribe suggested adding CSS to the theme’s stylesheet (base.css/style.css) in the Assets folder, targeting the footer newsletter block with center alignment and margin adjustments

  • DaisyVo recommended placing CSS code in the Custom CSS section under Theme Settings, using media queries for responsive alignment on different screen sizes

Current Status:

The issue appears partially resolved:

  • Desktop view: Successfully center-aligned
  • Mobile view: Mixed results - worked in the customization preview but alignment issues persist on the actual live website

The original poster confirmed one solution worked when applied to the signup banner CSS file in the Assets folder, achieving center alignment on both desktop and mobile. However, there’s some confusion as later messages suggest mobile alignment problems continue. Made4uo-Ribe shared a screenshot showing proper alignment on their end and asked what device the user is testing on.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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!