Hi, I would like to display only 2 image with text per row on desktop. But the minimum the theme allows is 3.
Can someone please help with custom CSS to do so? I would like the content to cover evenly over the page width.
Theme is Pipeline. Screenshot below.
Thanks!
@tendtome
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.
Hi, Thank you. Our site is currently online with a different theme. And were working on this new theme as a draft in our theme libary. How do i share that with you? Thanks
i think this might work? https://ys6jog2jder5a4wl-25022726237.shopifypreview.com
Hey @tendtome ,
To customize the display so that there are only 2 images with text per row on a Pipeline theme (even when the theme defaults to 3), you can use custom CSS to adjust the layout.
Here’s an example CSS snippet you can use:
/* Ensure the parent container aligns content evenly */
.container-class {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* Adjust the child items to take up 50% of the width */
.container-class .child-item-class {
width: 48%; /* Adjust width for some spacing */
margin-bottom: 20px; /* Add some spacing between rows */
}
/* Responsive handling for smaller screens */
@media (max-width: 768px) {
.container-class .child-item-class {
width: 100%; /* Stack items for mobile screens */
}
}
Steps to Implement:
Replace container-class with the class name of the parent container holding the images and text (use developer tools to inspect this in your browser).
Replace child-item-class with the class name of the individual elements (each image + text block).
Paste this CSS code into the custom CSS section of your Pipeline theme.
If you’re unsure about the class names, share the HTML structure or clarify if you need further help identifying them!
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
@tendtome thanks but i can’t see similar section as per you link can you please show me so i will check and give you proper code
With over 5 years of experience working with Shopify, if you encounter any further issues or need assistance, feel free to reach out via email. I’m here to help!
Thanks! 
it is the same section type as this, but its one on one of our product page templates. does this help?
im not sure to identity the container.class and child-item-class.
@tendtome can you please just send this section code so i will check and update code like this give option
this worked for desktop. Thank you very much! now is it possible to display 1 section on mobile. It is currently 2, but is much too small.
/* Ensure the parent container aligns content evenly /
.section-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
} / Adjust the child items to take up 50% of the width /
.section-columns .grid__item {
width: 48%; / Adjust width for some spacing /
margin-bottom: 20px; / Add some spacing between rows */
}
To ensure a single section displays per row on mobile devices, you can adjust the CSS with a media query targeting smaller screen sizes. Here’s how you can update your existing code to achieve this:
/* Desktop Layout (unchanged) */
.section-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section-columns .grid__item {
width: 48%; /* Keeps 2 items per row on larger screens */
margin-bottom: 20px;
}
/* Mobile Layout */
@media (max-width: 767px) { /* Target mobile screens */
.section-columns .grid__item {
width: 100%; /* Single item per row */
margin-bottom: 20px; /* Maintain spacing between items */
}
}
Let me know if you need further assistance!
Thank you Rajweb. However it is still displaying the same on mobile. Nothing has changed. Could you please advise?
@tendtome if possible to share full section code i have just theme option