Shopify themes, liquid, logos, and UX
we have used a custom liquid to create below field in home page,
texts are aligned left side. recently i have updated the images to new ones. after that the text alignment on 2nd image is off on full screen desktop view. See below,
Can some one please help me correct this issue.
below is the code used in CSS liquid,
<div class="custom-liquid-banner">
<ul>
<li>
<img src="https://cdn.shopify.com/s/files/1/0906/5650/6170/files/Human_White.png?v=1734536200" />
<span>
<h3>Choose your favourite photo</h3>
<p>Upload a favourite photo with your order ( we accept 98% of all photos!) Our team will always reach out if your photo isn't right.</p>
</span>
</li>
<li>
<img src="https://cdn.shopify.com/s/files/1/0906/5650/6170/files/Customize_White.png?v=1734536198"/>
<span>
<h3>Customize & make it your own</h3>
<p>Add your name, choose a background color, customize the style, and select a frame & size.
</p>
</span>
</li>
<li>
<img src="https://cdn.shopify.com/s/files/1/0906/5650/6170/files/delivery_White.png?v=1734536195" />
<span>
<h3>Sit tight!</h3>
<p>Once you submit your order, our artists get to work on digitally-illustrating your portrait, expect to recive your custom portrait within 1-2 weeks.</p>
</span>
</li>
</ul>
</div>
store URL is: https://qcnphvtdabbetgfd-90656506170.shopifypreview.com
Solved! Go to the solution
This is an accepted solution.
Hi @jahin2
Try this one.
.image-with-text__content .custom-liquid-banner li {
justify-content: unset;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hello @jahin2 ,
If you keep equal text in all paragraphs then it will fixed automatically.
Try to add few more words here
<p>Add your name, choose a background color, customize the style, and select a frame & size.
</p>
and it will fixed.
Regards
Guleria
This is an accepted solution.
Hi @jahin2
Try this one.
.image-with-text__content .custom-liquid-banner li {
justify-content: unset;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025