align text

Store Design
,

Topic summary

Mobile layout issue: the store owner wants the heading and paragraph left-aligned on phones (image provided for context).

Proposed fixes (both via CSS in the theme):

  • Path: Online Store → Theme → Edit code → open theme.css (or base.css) and paste at the bottom.
  • Option 1 (targets devices ≤767px wide):
    @media screen and (max-width: 767px) {
    .prose.text-center.sm:text-start { text-align: left !important; }
    }
  • Option 2 (targets devices ≤699px wide):
    @media (max-width: 699px) {
    .prose.text-center.sm:text-start { text-align: left; }
    }

Notes:

  • The selector .prose.text-center.sm:text-start forces text to align left on small screens; a media query applies styles conditionally based on screen width (CSS = Cascading Style Sheets).
  • Both replies instruct adding the snippet at the end of the stylesheet; one uses !important and a wider breakpoint (767px).

Status/outcome: No confirmation from the original poster yet; solution not marked as resolved.

Summarized with AI on December 13. AI used: gpt-5.
1

Image 02-12-2024 at 18.15.jpeg
Image 02-12-2024 at 18.15.jpeg790×1534 91.7 KB

i want the heading and paragraph to be aligned on the left on phone

discinetherlands.com

key: joepjoep

2

Hello @Disci ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code at the bottom:

@media screen and (max-width: 767px) {
.prose.text-center.sm\:text-start {
    text-align: left !important;
}
}

If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

3

Hi @Disci

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:699px){
.prose.text-center.sm\:text-start {
    text-align: left;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!