A Shopify store owner is trying to add horizontal lines between images in a custom widget but encountering alignment and positioning issues across desktop and mobile views.
Initial Problem:
Ongoing Issues (Mobile):
Solution Attempts:
BSSCommerce-B2B provided multiple CSS code iterations to adjust line positioning and alignment, with incremental improvements but persistent spacing/alignment problems.
Current Status:
User now implementing the widget on a newer theme and experiencing similar alignment issues. Shared current code via Codeshare and specific product URL for troubleshooting. Awaiting further CSS adjustments to achieve precise line-to-icon connections across all screen sizes.
Hello, I got this code Oct 18 2:04 PM - Codeshare for displaying this:
But I want to add straight horizontal lines between the images, like I added in the image. But it is not working, can anyone please help me with this? Thanks in advance!
Store URL: Controllable LED Curtain – TrendBlend
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
Hi @BSSCommerce-B2B it works, is it possible that the line starts in the middle of the image instead of in the middle of the whole widget?
@TrendBlend , change the code like this
Hello @BSSCommerce-B2B , it looks better now but it does not look like what I want it to look like yet. Do you know how to adjust the line to let it connect each image like this:
And also, on phone the words ‘Bestelling Klaar’ go on top of each other, instead of next to each other which messes up the look of the line aswell. Do you know a solution for this aswell?
Image problem phone
@TrendBlend , change the previous code like this
Result:
Desktop:
Mobile:
If it helps you, please like and mark it as the solution.
Best Regards 
Hello @BSSCommerce-B2B ,
There are still some issues on phone.
The middle image is still a bit more to the bottom than the others, I think because the title has two words. Can the words be placed next to each other instead of on top of each other? And also would it be possible to let each end of the line touch the picture. So the lines connect to the pictures. Kind regards,
Stef
@TrendBlend , ok try this one
Hello @BSSCommerce-B2B ,
the lines finally are displaying at the center of the icons, but there is still a lot of room in between the line and the icons. Would it be possible to touch the icons with both lines, but not go through them.
Hello sir,
I’m trying to implement this widget on my newer theme but I’m experiencing some issues.
The right bit shows a bit too high on phone.
and on desktop, the middle bit shows a bit too low and the lines do not precisely connect to the icons. I was hoping you could help me solve these issues. I’m using your code but I switched the .line part to .js-line so it does not interfere with any other lines.
My current code:
