Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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;
}
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.
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;
}
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.
looks great on Desktop
Do you have any solutions to fix it looking so silly on mobile? Thankyou
@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;
}
}
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%);
}
}
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 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;
}
}
did not effect the mobile
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;
}
}
your this img has a background problem : a bit grayish
you can download and replace with this :
click above img and :
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024