How to center headings on mobile

[babidibooparty]

Hi. In my Dawn Theme, on Mobile, I need to center the heading "BEST SELLERS" for the collections list section.  This heading is already centered on desktop but currently remain left aligned on mobile. Thanks for any help in advance!

Store: www.babidiboo.com 

[Moeed · Accepted solution]

Hey @babidibooparty 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.collection-list-title {
    text-align: -webkit-center !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[babidibooparty]

it worked! thank you so much!!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[akshay_bhatt]

Hi @babidibooparty ,

To center the "BEST SELLERS" heading in the collections list section on mobile for your Dawn theme, follow these steps:

Step 1: Inspect the Section

1. Open your site in a browser and inspect the "BEST SELLERS" heading using developer tools.
2. Look for the specific class or ID associated with the heading.

Step 2: Edit the Theme's CSS

1. From your Shopify admin, navigate to Online Store > Themes.
2. Find your Dawn theme, click Actions > Edit Code.
3. Open the base.css file (or similar stylesheet).

Step 3: Add the CSS Rule

Insert the following CSS at the bottom of the stylesheet:

@media (max-width: 768px) {
  .collection-list-section-class-name h2 {
      text-align: center;
  }
}

• Replace .collection-list-section -class-name with the actual class or ID of the section or heading you identified in Step 1.
• The @media (max-width: 768px ) rule ensures the change applies only to mobile devices.

Step 4: Save and Test

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[babidibooparty]

thank you! i already try another one and it worked but thank you for your time!!