#Debutify theme - Text Colums with images - 4 per row

[OrganicUniverse]

Is it possible to code the featured-colums.liquid to display 4 per row on mobile?

Theme: Free Debutify

Url: https://officalorganicuniverse.myshopify.com/

[system]

@OrganicUniverse
Do you want to like this??

[system]

@OrganicUniverse
Do you want to like this??

[LitExtension]

Hi @OrganicUniverse ,

I don’t think it will display well with 4 products in a line: https://i.imgur.com/OPGVf8U.png

If you want, go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 769px){
	.featured-columns-section .grid-spacer .grid__item{
		width: 25% !important;
		flex: 0 0 25% !important;
	}
}

I think it will be more beautiful when 2 products in a line: https://i.imgur.com/5aKV1CE.png

Please change code:

@media screen and (max-width: 769px){
	.featured-columns-section .grid-spacer .grid__item{
		width: 50% !important;
		flex: 0 0 50% !important;
	}
}

Hope it helps!

[OrganicUniverse]

Thank you so much! Do you have any code for making the buttons fit the grid?

Hope it makes sense!

[LitExtension]

Hi @OrganicUniverse ,

If you want to minify it, you can add code:

@media screen and (max-width: 769px){
	.featured-columns-section .grid-spacer .grid__item .btn{
		font-size: 10px !important;
		padding: 2px !important;
	}
}

or hide it with code:

@media screen and (max-width: 769px){
	.featured-columns-section .grid-spacer .grid__item .btn{
		display: none !important;
	}
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.