Solved

Text columns with images align 5 columns in 1 row

DarmorGamz
Excursionist
23 0 5

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.

 

Accepted Solutions (2)

24by7themes
Shopify Partner
400 61 79

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;
}
Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990

View solution in original post

ChoosiZon
Shopify Partner
416 66 111

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.


 

Donate
For faster response with a fee pls email to : choositech@outlook.com

View solution in original post

Replies 10 (10)

24by7themes
Shopify Partner
400 61 79

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;
}
Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990

ChoosiZon
Shopify Partner
416 66 111

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.


 

Donate
For faster response with a fee pls email to : choositech@outlook.com
DarmorGamz
Excursionist
23 0 5

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

Kinjaldavra
Shopify Partner
2302 570 1422

@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
Shopify Partner
416 66 111

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

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
DarmorGamz
Excursionist
23 0 5

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

 

Kinjaldavra
Shopify Partner
2302 570 1422

@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
Excursionist
23 0 5

DarmorGamz_0-1618288260928.png

did not effect the mobile

ChoosiZon
Shopify Partner
416 66 111

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

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
416 66 111

your this img has a background problem : a bit grayish

Screenshot 2021-04.png

 

you can download and replace with this :

1233.png

 

click above img and :

1244.png

Donate
For faster response with a fee pls email to : choositech@outlook.com