Brooklyn theme, text not re-centering for mobile

[MacSenour]

I have two custom areas on my page, each a one line of text. They look great on the desktop, centered etc. When text for the mobile version, the text is unchanged and is cut off from the screen. It should recenter for the smaller screen size, but I don’t see where or how to do that.

any ideas?

[Made4uo-Ribe]

Hi @MacSenour

Which section and page this text in your store?

and please, share your store URL. Thanks!

[mt686]

Hey there! It sounds like the text isn’t adjusting to fit the screen width on mobile, likely due to fixed widths or missing responsive settings in the CSS. First off, please share your URL and I can give a more specific answer. But based off the information, here’s how you can fix it:

---

Steps to Fix Text Alignment for Mobile in Brooklyn Theme1. Log in to Shopify Admin:

• Navigate to Online Store > Themes > Edit Code.

1. Find the CSS File:

   • Open the theme.css or style.css file in the Assets folder.

2. Add Responsive CSS: Add this code to the bottom of your CSS file:

@media (max-width: 768px) { /* Target mobile screens */
    .custom-text-class { /* Replace with the actual class of your custom text */
        text-align: center; /* Centers the text */
        width: 100%; /* Ensures it doesn't get cut off */
        word-wrap: break-word; /* Breaks long words if necessary */
        margin: 0 auto; /* Centers block elements */
        overflow-wrap: break-word; /* Ensures text wraps properly */
    }
}

---

Explanation:1. Text Alignment: text-align: center ensures the text is visually centered.

1. Full Width: width: 100% ensures the text spans the width of the container on smaller screens.
2. Word Wrapping: word-wrap and overflow-wrap handle long words, ensuring they don’t overflow.
3. Mobile Targeting: The @media rule applies these styles only to screens narrower than 768px (adjust as needed).

---

Find the Correct Class:- Use your browser’s Inspect Tool to find the class for the custom text (e.g., .custom-text-class).

• If you’re unable to find it, check the Liquid file where you added the custom text. Look for a div or span wrapping the text and note the class name.

---

Test Your Changes:1. Save the CSS file.

1. Refresh your store on a mobile device or resize your browser window to test the changes.

---

Easier Option with EasyEdits

If you want a no-code solution, EasyEdits allows you to adjust and preview text alignment and responsiveness visually. You can make edits during the free trial and keep them forever.

---

Let me know if you need help identifying the class or refining the styles! (P.S. I’m the developer of EasyEdits, so feel free to ask about it ).

[MacSenour]

Store: https://phileas-foggs-fabulous-confections.myshopify.com/

There are two text sections, “Holiday cookies are only…” and “Start Planning…”.

Appreciate the help.

[Made4uo-Ribe]

Thaks, what device ar you using?

This is on my end.

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