Aligning text on left (transbox element)

[usmekhan91]

Hi,

I am facing problem using custom code on main featured banner on a homepage. i had add a new css property in my theme.liquid property. The main issue I am facing that i am unable to align the text on left can you help me in this regards?

The code is 

<style>
div.transbox {
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  display: block;
}

div.transbox p {
  font-weight: 500;
  color: #000000;
  margin: 0;
  font-size: 50px;
  text-align: left;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.transbox:nth-child(1) {
  animation: fadeInOut 8s infinite;
}

.transbox:nth-child(2) {
  animation: fadeInOut 8s infinite;
  animation-delay: 2s;
}

.transbox:nth-child(3) {
  animation: fadeInOut 8s infinite;
  animation-delay: 4s;
}

.transbox:nth-child(4) {
  animation: fadeInOut 8s infinite;
  animation-delay: 6s;
}
</style>
<div class="transbox"><p>balanced</p></div>
<div class="transbox"><p>strong</p></div>
<div class="transbox"><p>focused</p></div>
<div class="transbox"><p>healthy</p></div>

I need that it should response according to other element on the banner when zoomin and zooming out and also the text should be appear on left side rather then center in the transbox and should be align with other text on the banner. Can any only please help me in this regards?

link: https://versusforher-ae.myshopify.com/

password: 021

[Made4uo-Ribe]

Hi @usmekhan91 

I adjusted it more to the left, but the words within the transbox don't have consistent alignment since the text changes. Some are longer and align with the non-transbox words, while shorter words align in the center.

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.t4s-content-wrap .t4s-content-position {
    left: 5%;
}
div#b_164602873867eb3815-2  div.transbox {
    left: 40%;
}

And Sve. 

Rsult:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[usmekhan91]

Still not left aligned