Text columns with images align 5 columns in 1 row

Solved
DarmorGamz
Tourist
21 0 4

Hi, Im using the context theme and I cant figure out how to align 5 columns in a single row using html.

Website url: NinjaToolSupply.com

Password: password

DarmorGamz_1-1618227239310.png

Id like to have these 5 images all in 1 row and ideally the same width apart.

 

Thank you in advance.

 

0 Likes
24by7themes
Navigator
354 54 61

This is an accepted solution.

Please below line of css in your index.css file

.text-columns__content {
    display: flex;
    align-items: center;
}
.text-columns__content .mb3 {
max-width: 100% !important;
}
Expert Shopify Developer hire me
Still not satisfied!!! / are you required any custom development? contact me
Is it good solution? Yes, please Like.
ChoosiZon
Navigator
263 45 76

This is an accepted solution.

you can at bottom of index.css put :

.text-columns__feature {
width:20%;
}

 

as for why the images not align is because they are not same aspect-ratio,and not big enough.


 

DarmorGamz
Tourist
21 0 4

DarmorGamz_0-1618230528746.png

looks great on Desktop

DarmorGamz_1-1618230544435.png

Do you have any solutions to fix it looking so silly on mobile? Thankyou

0 Likes
Natztech
Shopify Partner
561 140 334

@DarmorGamz  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 429px){
 #shopify-section-1618180127c05b6101  .text-columns  .text-columns__content .text-columns__feature{
   width: 100% !important;
 }
 }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly - My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
ChoosiZon
Navigator
263 45 76

oh i see you added both the code.

You can remove mine and add this if you want :

.text-columns__feature {
max-width:20%;
}

@media only screen and (max-width: 768px) {
  .text-columns__feature {
    max-width: 33.33%;
  }
  .text-columns__content {
   background:rgb(247 247 247 / 80%);
  }
}

 

0 Likes
DarmorGamz
Tourist
21 0 4

Mobile is now aligned properly, however it looks very tiny. Also how do i remove the small amount of padding above the section with the logos.

DarmorGamz_3-1618260565153.png

DarmorGamz_4-1618260570474.png

DarmorGamz_5-1618260581996.png

 

0 Likes
Natztech
Shopify Partner
561 140 334

@DarmorGamz  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 429px){
 #shopify-section-1618180127c05b6101  .text-columns  .text-columns__content .text-columns__feature{
   width: 100% !important;
 }
 }
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly - My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
DarmorGamz
Tourist
21 0 4

DarmorGamz_0-1618288260928.png

did not effect the mobile

0 Likes
ChoosiZon
Navigator
263 45 76

ok replace line 15072-15099 with this :

@media only screen and (max-width: 768px) 
{
  .text-columns__feature 
  {
    min-width: 33.33%;
  }
  .text-columns__content 
  {
   background:rgb(247 247 247 / 80%);
  }
}
.text-columns__feature 
  {
width:20%;
}
.footer__col-list a.underline {
    text-decoration: none;
}
  a[href="/collections/sale"]{
 color:red !important ;
}
  .nav .nav__item-parent:hover .nav__submenu {display: block;} 
  
@media only screen and (max-width: 429px){
#shopify-section-1618180127c05b6101 .text-columns .text-columns__content .text-columns__feature {
    width: 100% !important;
}
}

 

0 Likes