How can I display three items in one row on a laptop version?

Store Design

Topic summary

Tres elementos de contenido en Shopify deben mostrarse en una sola fila en versión laptop/desktop, sin alterar el diseño móvil (que debe seguir en 3 filas). Se comparte el sitio y una captura para ilustrar el problema.

Actualización/solución propuesta:

  • Se sugiere agregar CSS al final de theme.min.css:
    • En pantallas grandes: forzar .custom-content__blocks a display: flex para alinear los 3 ítems en una fila.
    • En pantallas de hasta 768px: cambiar a display: grid para mantener el comportamiento en móvil.

Resultado:

  • La persona que pidió ayuda confirma que funcionó y agradece. La conversación queda resuelta.
Summarized with AI on February 26. AI used: gpt-5.2.
1

Hello,

I need help to make these 3 items appear in one row on the laptop version.

For the mobile version, these items appear in 3 rows, which is the layout I want. Please do not change the way it looks on the mobile version, just my above request for the laptop version

Here is my website: https://wowberrybites.myshopify.com/

Thank you.

winnado11_1-1637825607979.png
winnado11_1-1637825607979.png3217×1411 291 KB

2

Hello @winnado11 ,

Please add this code in your theme.min.css file at the bottom.

.custom-content__blocks {
    display: flex !important;
}

@media only screen and (max-width: 768px){
.custom-content__blocks {
    display: grid !important;
}
}

Hope this will work for you. If the code does not work as expected then please remove it.

1 Like
3

@rutvik_shop Thank you so much. Greatly appreciated!

1 Like
4

Hey @winnado11 !

It’s my pleasure to help you out. Best wishes to you!