Currently, mine is like this
This is what I needed
Desktop
Mobile
@dmwwebartisan I saw you solve this on another post, do you have the solution for Expanse theme? Thanks
Please share your store url.
Please add the following code at the bottom of your css file.
@media only screen and (min-width: 768px){
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 250px;
}
}
@media only screen and (max-width: 768px){
.grid-product__title{
width: 185px;
}
}
Could you please put the code again so I will check right now?
Put this code instead.
@media only screen and (min-width: 769px){
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 250px;
}
}
@media only screen and (max-width: 768px){
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 120px;
}
}
Please remove last code and add this new code.
@media only screen and (min-width: 769px){
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 250px;
}
.new-grid{
display: -webkit-inline-box;
}
}
@media only screen and (max-width: 768px){
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 160px;
}
.new-grid{
display: -webkit-inline-box;
}
}
On Desktop it have fix the above problem but my collection list become small like the below screenshot and product page you may also like and recently view not fixed yet.
Collection list become smaller and left empty space
You may also liked and recently view not yet fixed but for my theme I do have options to enter css code like the screenshot
On mobile it gets worse like the screenshot and for new arrivals and hot sale 2023 become slider options on but I choose no slide like the same on desktop and some featured collections that I enable slider options cannot slide and some images become small and big. On mobile the screen get moving I can slide through like 3 page of right side like the screenshot
Please try the following code.
@media only screen and (min-width: 769px){
.new-grid .grid-item {
padding-left: initial !important;
padding-right: initial !important;
}
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 250px;
}
}
@media only screen and (max-width: 768px){
.new-grid .grid-item {
padding-left: initial !important;
padding-right: initial !important;
}
.grid-product__title{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 160px;
}
}
On desktop it looks almost good as mobile but can the title name move inside the square box or equal to the square picture box in the screenshot? On desktop the product page you may also like and recently viewed products went down like last featured collection, for mobile it is fine because I use slider on mobile.
@dmwwebartisan I have fixed the title name move inside the square box or equal to the square picture box in the screenshot from Shopify community help. Now left this> on desktop the product page you may also like and recently viewed products went down like last featured collection. Appreciate the help, almost there!
@dmwwebartisan All things from featured collection on desktop went down again and on mobile featured collection slider image becomes bigger like I can only see 2 product in slide but normally it is 2 and a half image on mobile slider. Become I have delete line 8227 code to make the title and price name align in the square box
@GemPages @gr_trading Do you know how to shorten title name in this thread?
With the latest above code things become like this
Featured collections products went down
Product page recomended for you, you may also like, recently view products went down
Collection List products on desktop title too short before fitting the square box but on mobile device is good and fit the square box
On mobile view slide product become bigger and only available to see 2 products, before the code it is 2 and half picture like the comparison below
