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 :
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024