Hello,
could you help me with an idea how to bring the product title in one line, at the moment it is looking like this and looks not professional.
For your help I would be very thankful.
Greetings, ladybird
There are a few things you can try:
- Reduce font size, but that would probably make some titles unreadable. As some are very long.
- You could use
text-overflow: ellipsis;and, with that, hide all text in the second row. - Bit complex: make a product metafield for an alternative/short title, then in code, if that meta field exists, replace the current title on collection pages only
- Also, you could just change every product name to short form, Fenix HM55R, but I guess that is not good for SEO.
thanks, in the pic i have each product with two lines of text and this is fine, problem is that the lines are not starting in the same high as it should be, you know what I mean? i you look in the pic you see Fenix HM60R is starting higher as the product beside with Fenix HM65R, the text is for all products two lines but i dont know why they are not in the same horizont
Ah, I misunderstood, sorry.
Could you share a link to your store?
sure, here you go Stirnlampen & Kopflampen, Hochleistungs LED für Outdoor, Sport & Arbeit- Fenix – fenixlight
thanks in advance for your help
Your images are not same dimmensions so it pushes other content down.
Try this. In theme editor, on collection page, in Product grid section, find Custom CSS setting input and paste
.card .card__inner {
max-height: 350px;
}
@media screen and (max-width: 749px) {
.card .card__inner {
max-height: 190px !important;
}
}
It should put limit so all images take same height.
thanks, this is not the solution, i try but it is not working, again the product title line is in different horizont
In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:
quick-add-modal .product__column-sticky .h1 {
font-size: 13px;
}
Best regards,
Devcoder 
thanks but this is not working, should I give up to fix this or is anybody here and knows the solution?
add this line in your main js file below
(() => {
const style = document.createElement('style');
style.textContent = `
/* Override Dawn's different ratio heights */
.card-wrapper .card__inner {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
padding-bottom: 0 !important;
aspect-ratio: auto !important;
}
/* Make media fill the fixed card area */
.card-wrapper .card__inner .card__media,
.card-wrapper .card__inner .media {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
/* Keep complete product image visible */
.card-wrapper .card__inner .card__media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* Product information starts immediately after the fixed image */
.card-wrapper .card__content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Equal title area */
.card-wrapper .card__heading {
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
margin-top: 0 !important;
overflow: hidden !important;
}
`;
document.head.appendChild(style);
console.log(' title alignment test applied');
})();
this will solve your issue screenshot is attached for the result i received
Hi @ladybird3001 Welcome To Shopify Community So Try This One For Both View Desktop & Mobile View By Following These Steps Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution
<style>
.card__heading {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
width: 98% !important;
position: relative !important;
}
</style>
It’s quite simple guys, why are you all complicating it.
I agree with @Laza_Binaery , you just need to reduce the height of .card__inner
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.collection .card__inner {
min-height: 400px !important;
}
.card__media img {
object-fit: contain !important;
}
}
@media screen and (max-width: 767px) {
.collection .card__inner {
min-height: 250px !important;
}
.card__media img {
object-fit: contain !important;
}
}
</style>
RESULT:
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
Best,
Moeed
thank you, it helped partly, because now all pics on the website are up and down, can you help me here to fix it only on the collection side please and nowhere else? thank you so much in advance
Wrap the code in {% if request.page_type == 'collection' %} condition so that it only affects the collection pages, nothing else. So the complete version of the code should look something like this:
{% if request.page_type == 'collection' %}
<style>
@media screen and (min-width: 768px) {
.collection .card__inner {
min-height: 400px !important;
}
.card__media img {
object-fit: contain !important;
}
}
@media screen and (max-width: 767px) {
.collection .card__inner {
min-height: 250px !important;
}
.card__media img {
object-fit: contain !important;
}
}
</style>
{% endif %}
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
Best,
Moeed
Before adding more CSS, it is worth checking whether your theme can do this natively, because most Dawn-based themes can and it fixes desktop and mobile at the same time.
In the theme editor, open a collection page, click the product grid section, and look for a setting called “Image ratio” (some themes call it “Image shape” or “Card image size”). If it is set to “Adapt to image”, every card is exactly as tall as its own image, which is the behaviour you are describing. Setting it to Square or Portrait makes every image box the same height, so the titles all start on the same line. No code at all.
That is also why the CSS attempts keep half-working. min-height sets a fixed pixel floor. You can tune it until it looks right at one screen width, but it does not scale, so at mobile widths the same number is either too tall or too short and the images end up looking wrong. That matches what you saw.
If your theme genuinely has no such setting, the CSS equivalent is a ratio rather than a height:
.template-collection .card__media { aspect-ratio: 1 / 1; }
.template-collection .card__media img { width: 100%; height: 100%; object-fit: contain; }
aspect-ratio scales with the card, so it holds at every breakpoint instead of only one, and object-fit: contain keeps the whole torch visible rather than cropping it. Use cover instead of contain if you would rather the image fill the box and be cropped.
One caution: I have not looked at your theme files, so treat that selector as a starting point. Depending on the theme the wrapper may be .card__inner or .grid__item .media rather than .card__media. Inspect one product card to confirm the class before applying it.
Agreed. It’s very likely there’s a setting inside the module or the theme itself to standardize the image ratio. @ladybird3001 what theme are you using?
i am using dawn theme, the standard one
