Centre collections list titles

Store Design
, , , , ,

Topic summary

A Shopify store owner wants to center collection list titles (“Player Cases,” “Kit Cases,” etc.) both horizontally and vertically within their display boxes on mobile devices.

Initial Problem:

  • Titles are horizontally centered but positioned at the top of boxes instead of the middle
  • Issue affects collection page layout on mobile view

Solutions Attempted:

  1. First CSS code added flexbox properties and text alignment to .card__information and .card-wrapper elements
  2. Second attempt (code details incomplete in thread) partially resolved the issue
  3. Third solution specifically targeted the “Kit Cases” collection with additional CSS selectors using href attributes and removed margin from .card__heading

Current Status:

  • Most collections now display correctly
  • “Kit Cases” collection still not properly centered
  • Latest proposed solution has not yet worked
  • Discussion remains unresolved and ongoing
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

hi i would like to centralise each collections list title (player cases, kit cases etc - see attached) so that it is central within the box.

URL: golazocasesuk.myshopify.com

Screenshot 2024-08-19 at 19.41.00.png
Screenshot 2024-08-19 at 19.41.00.png880×1174 98.5 KB

2

Hi @golazocases , go to theme.liquid and add the following code at the end of it before the tag :

@media (max-width:700px){
.collection-card-wrapper  .card__information, .card-information {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}
}
3

Thanks but its not centred the texts within the boxes. Take the kit case text for example, you can see its centrally aligned but is at the top of the box. We want it to be centrally aligned and in the centre of the bo - same for each collection title.

Screenshot 2024-08-19 at 19.56.52.png
Screenshot 2024-08-19 at 19.56.52.png274×292 10.2 KB

4

@golazocases , Replace the previous code with this :
5

Thanks, all look good apart from kit cases (see attached)

IMG_6954.PNG
IMG_6954.PNG1284×2778 308 KB

6

Please try the below code and if it works, please kindly like and mark solution. Thank you

@media (max-width: 700px) {
  .card__information {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 700px) {
  .card__information a[href="/collections/kit-cases"] {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
  }

  .card__information a[href="/collections/kit-cases"] .card__heading {
    margin: 0;
  }
}
7

hey this hasnt worked either