¡Hi! How can I make the text fully fit in the image in mobile? I have been playing around with it with the inspect element in Chrome but can’t seem to get it right.
Should I change it with the options from below at the assets/section? Or do I have to add some code?
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
Another thing, When I seem to get it right, one word is too long and it has to cut it, is there a way to make it responsive so it also changes the font size to avoid cutting the word?
Here is my URL:
https://bebettermx.myshopify.com/
Thanks!
1 Like
I forgot to mention the theme is Be Yours
@RuyVidegaray
can you confirm this look!
Hello @RuyVidegaray ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
For example,
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Please add below css code in bottom of assets/base.css file.
@media screen and (max-width: 749px)
.collection-list__item .card__text .h3 {
white-space: normal;
}
Thank you.
Hi @GemPages . Thanks for your answer. It seemed to work perfect with some of the different dimensions and devices. But for some devices it cuts the last word (“Entrenamiento”)as in the picture below:
Is there any piece of code or recommendation you can help me out?
Thanks!
Hello @RuyVidegaray ,
You could please try reducing the font size of the text by adding the below code before in the theme.liquid
Best regards,
GemPages Support Team
@GemPages Thank you very much
1 Like
I am so glad that my solution can help.
Best regards,
GemPages Support Team
1 Like
