One the slide heading text is way to high on mobile anyone know how to bring it down? The other problem is the featured collection heading text is not centered pls help I’m really confused on how to fix it
AI-generated summary
The store owner needs two mobile-layout fixes in Shopify’s Dawn theme: the slideshow heading sits too high, and the Featured Collection heading is not centered. Several replies recommend using the theme editor, though no store URL or confirmation of a successful fix was provided.
The most direct suggested steps are to switch the theme editor to mobile preview and enable “Stack text below image” in the Slideshow settings, which moves the text below the image. To center the collection heading, one reply suggests adding CSS that centers .collection__title in Theme settings. Other replies advise adjusting the slideshow’s mobile content position or spacing and using section-specific CSS if the editor lacks alignment controls. A later suggestion offers mobile-only CSS to add top padding while keeping slideshow text over the image, or to center the collection title and its wrapper.
The discussion remains open: the owner has not reported which layout they prefer or whether any changes worked. The attached screenshots illustrate the original and proposed appearance.
Hi @degain222
Both of these are quick changes in the Dawn theme editor. This is how your mobile page ends up:
- In your admin, click Online Store, then Themes.
- Next to your theme, click Edit theme.
- At the top, tap the phone icon to switch to the mobile view.
- In the left list, open Slideshow.
- Switch on Stack text below image.
- Click the Theme settings gear icon, top left.
- Open Custom CSS and paste this in:
.collection__title {
text-align: center;
}
- Press Save and refresh your phone.
Hi @degain222
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder
@degain222 can you please share your website link? I can provide you the css and steps to take it down and put it in center as well
You can fix both issues from the Shopify theme editor. For the slideshow heading, open the slideshow section and check the mobile layout settings. Adjust the content position or reduce the top spacing so the heading sits lower on mobile.
For the Featured Collection heading, check whether the section has a text alignment option and set it to center. If there’s no such option, you may need a small CSS adjustment.
Also, make sure you preview the changes on mobile before saving. These should be fairly simple fixes!
Hi @degain222,
Totally understandable — mobile layout settings in Dawn can be a bit confusing at first because text blocks often behave differently than they do on desktop!
Here is an easy, non-destructive way to get both fixed exactly how you want them:
-–
### 1. Bringing the Slideshow Heading Down on Mobile
There are two ways depending on the look you want:
* **Option A (If you want text to remain ON TOP of the image):**
Sometimes the heading sticks right at the top edge of the mobile screen. You can push it down comfortably by going into the **Slideshow section > Custom CSS** (at the bottom of the section settings) and adding:
```css
@media screen and (max-width: 749px) {
.slideshow__text.banner__box {
padding-top: 3.5rem !important; /\* Increase or decrease this number to adjust height \*/
}
}
```
* **Option B (If you want the text stacked in a neat card below the banner):**
Click on **Slideshow** in your theme editor, scroll down to the **Mobile layout** settings on the right panel, and enable **“Stack images”** / **“Show container on mobile”**.
-–
### 2. Centering the Featured Collection Heading
In Dawn, the collection heading sits inside a flex container (`.title-wrapper-with-link`). Sometimes using just `text-align: center` doesn’t work properly if there is a “View all” link sharing the line.
To make sure it centers cleanly on mobile:
1. In the theme editor, click on your **Featured collection** section.
2. Scroll to the very bottom to **Custom CSS**, and paste:
```css
@media screen and (max-width: 749px) {
.collection .title-wrapper-with-link {
justify-content: center !important;
text-align: center !important;
}
.collection__title {
margin: 0 auto !important;
text-align: center !important;
}
}
```
3. Hit **Save** in the top right.
-–
Both of these will apply strictly to mobile screens without messing up how your store looks on desktop!
If your theme layout still resists or you want a quick pair of eyes on your store preview link, feel free to reply or shoot a DM — happy to help you get it looking clean!