Dawn Theme - how to center text

Store Design
1

Hi,

I am using the Dawn theme. I would like to centre text on the homepage.

And I would like to centre the collection heads, and collection descriptions.

I do not want the main text in any blog posts centred.

Which codes should I use? I am currently using the following, but it centres everything.


.title-wrapper-with-link {
text-align: center;
display: block;
}
.collection__title h2.title {
text-align: center;
}

.banner__heading {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1.5) !important;
}

.banner__text p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1.5) !important;
}

.rte p {
    text-align: center;
}
2

Then put the styles in a custom-liquid block only on certain pages.

Beyond that it doesn’t mean anything if we can’t SEE the actual site.
ALWAYS provide publicly inspectable reference urls, the info is right in front of you communicate it
Others aren’t mind readers , remove guesswork.

3

Hi @OD0Cs

Please try this.

.template-index .title-wrapper-with-link {
  text-align: center;
}

.template-index .banner__heading {
  text-align: center;
}

.template-index .banner__text p {
  text-align: center;
}

.template-collection .collection__title,
.template-collection .collection-hero__title,
.template-collection .collection-hero__description {
  text-align: center !important;
}

.rte p {
  text-align: left !important;
}

Best regards,
Devcoder :laptop:

4

@OD0Cs can you please share your website link? and screenshots of the text which you need in the center?

5

Hi @OD0Cs

Use more specific css selectors to target only elements on the homepage. For example, add .index as a prefix to selectors to only affect the homepage. Center collection titles and descriptions with .collection__title, .collection__description { text-align: center; } and add .index .rte p { text-align: center; } so it won’t interfere with your blog posts.

6

Could you share the link to your page?