Help! How to fix margin/padding alignment for text in one column?

stellaa
Excursionist
40 0 7

Hi there! I'm trying to properly align the text in the first column. Don't know what caused it to be so when the code inputted is the same for everything else.

Please refer to the image below:

Screenshot 2021-02-26 at 12.12.26.png

Strange because on the HTML it's already aligned to the center, supposedly:

<table class="responsive-table" none="" border-color:="">
<tbody>
<tr class="responsive-table-row">
<td style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0297/6350/2212/files/Asset_15_2x_0c721fab-47cf-4007-a6c6-1ecb2165a90c.png?v=1614311924" alt=""> 
<h122>PLAY FOR<br> YOU</h122><br> <h166>We're here because we want to inspire you to get moving everyday! But also remember: progress over perfection and play over performance.</h166>
</td>
<td style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0297/6350/2212/files/Asset_14_2x_34ddfe1f-1736-4d30-8c65-1e55b97f35bb.png?v=1614311898" alt="">
<h122>PLAY FOR PEOPLE</h122> <br><h166>No matter where you are in your fitness journey, we welcome everyone and anyone who is willing to try. We're on this journey together</h166>&nbsp;</td>
<td style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0297/6350/2212/files/Asset_16_2x_610a01d7-d109-46ff-9539-6f2afb82600e.png?v=1614311950" alt="">
<h122>PLAY FOR PLANET</h122> <br><h166>We want you to care about waste reduction, environmental donation, slow fashion, and sustainable consumption, too. Let's put our planet first.</h166>&nbsp;</td>
</tr>
</tbody>
</table><br><br>

 

Here's the CSS I'm working on for it. 

.responsive-table h122 {
  position: absolute;
  max-width: 100%!important;
  top: 20%!important;
  left: 0px!important;
}

.responsive-table h166 {
  position: absolute;
  max-width: 100%!important;
  top: 50%!important;
  left: 0px!important;
  padding: 30px!important;
}

//Mobile Version//

@media only screen and (max-width: 600px) {
.responsive-table h122 {
  position: absolute;
  max-width: 100%!important;
  top: 5%!important;
  left: 0px!important;
}

.responsive-table h166 {
   position: absolute;
   max-width: 100%!important;
   top: 40%!important;
   eft: 0px!important;
   padding: 0px!important;

}
}

 

Access is here: https://sunnysixactive.com/

Password: heystella

 

THANKS SO MUCH!

0 Likes
HardikDavra
Shopify Partner
1802 279 791

Please place this code at the end of theme.scss

.responsive-table h122 {
    top: 38% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 100%;
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes