Why is my text offset to the left on collection pages?

Store Design
1

The text on collection pages is all offset to the left of the page, justified as per my code, but all sits as if in a lefthand column of a two column page. Site supposedly set to 120px with, product grid of 4 products wide at full width…

Using standard Shopify Refresh theme, haven’t modified the code, perhaps previous app code has remained and controlling the layout?! Any suggestions greatfully received…

https://shopbraille.com/collections/green-lite

2

Hello,

Go to Online store > Find the theme > 3 dots button > Edit code.

Add text-align: center;

.collection-hero__title {
  margin: 2.5rem
  /* Add this property */
  text-align: center;
}

Change this max-width to 1200px;

@media screen and (min-width: 750px) {
  .collection-hero__description {
    max-width: 1200px;
  }
}

Is this the final result you want?

dannyelo_0-1688997886244.png
dannyelo_0-1688997886244.png3024×1664 807 KB

Hope this helps.

1 Like
3

Thanks Dannyelo,

Thanks for replying, in an ideal world, exactly like you’ve displayed, but with the title size 28px and Left Justified? Which heading should the code be enter into, which page etc?

Thanks

Nick

4

Hello @NickJames1 ,

You are welcome!

I recomend you click the section in the Theme Customizer.

In the settings panel, scroll down until you find CUSTM CSS input box.

dannyelo_0-1689088023801.png
dannyelo_0-1689088023801.png287×242 11.8 KB

Then copy and paste this code:

.collection-hero__title {
  text-align: center;
}
@media screen and (min-width: 750px) {
  .collection-hero__title+.collection-hero__description {
      min-width: 100%;
  }
}

Let me know,