Text columns with images align 5 columns in 1 row

[DarmorGamz]

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

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

Thank you in advance.

[24by7themes]

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;
}

[ChoosiZon]

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]

looks great on Desktop

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

[Kinjaldavra]

@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;
 }
 }

[ChoosiZon]

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%);
  }
}

[DarmorGamz]

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.

[Kinjaldavra]

@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;
 }
 }

[DarmorGamz]

did not effect the mobile

[ChoosiZon]

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;
}
}

[ChoosiZon]

your this img has a background problem : a bit grayish

you can download and replace with this :

click above img and :