Center text on banner on home page

theblackibis
New Member
1 0 0

Hello! I have impulse design and I'm trying to center it on my site. How do I do this? 

Here is my website: theblackibis.com 

I want 'Your virtual gift shop because we all deserve to feel important' to be centered...along with the buttons for shop men and shop women. Thank you! 

0 Likes
LamQSolutions
Pathfinder
106 24 34

To center text, you can install my free app Custom CSS and add the following code

If you don't want to install the app, you can add the following at the bottom of your assets/styles.scss.liquid or assets/theme.scss.liquid file

.template-index .hero__text-wrap .page-width {
  display: block;
  position: relative;
}

.template-index .hero__text-wrap .hero__text-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
0 Likes
NgnLoop
Explorer
60 10 45

please find theme.scss file in code and paste this.

 

.template-index .hero__text-wrap .page-width {
display: block;
position: relative;
}

.template-index .hero__text-wrap .hero__text-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

0 Likes