Dawn - Featured collection - text margin changes - mobile

Store Design
1

Hi,

I’m using the Dawn 2.0 theme. This problem is regarding the mobile version.

I have a ‘featured collection’ section on my home page. As you can see in the picture below, in the last card, the words “FRUIT BOOSTER” by the code default are too long to be together on the same line, although actually they will not really cross the edges of the card. Therefore, I want to merge the last two lines into one line.

Ben1000_0-1649833741939.png
Ben1000_0-1649833741939.png916×526 21.1 KB

How can I do that?

Thanks

2

@Ben1000 - can you please share this page link? I will check if we can do that by adjusting space

3

@Ben1000
Welcome to the Shopify community!
Thanks for your good question.

’
Please share your Page url.
So that I will check and let you know the exact solution here.

4

@Ben1000 ,

Hi Please share the store URL.

5

Hi @oscprofessional @Zworthkey @suyash1 ,

Store URL:

wortheattt.myshopify.com

Thanks

6

@Ben1000 ,

oscprofessional_0-1649837597524.png
oscprofessional_0-1649837597524.png1505×788 139 KB

7

Hi @oscprofessional ,

You are on the English language, change to Dutch (the primary language)

8

@Ben1000 ,

@media only screen and (max-width: 400px) {
.card__content {
    padding: 9px 0;
}
.card__information {
    padding: 0;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

9

Hi @oscprofessional

  1. It’s not working

  2. I want to fit this code to be valid only for the specific section in my homepage or to all ‘Featured collection’ sections

Thanks

10

@Ben1000

Add the following CSS code to your assets/base.css bottom of the file.

@media only screen and (max-width: 400px) {
.card__heading.h5 {
    font-size: calc(var(--font-heading-scale) * 0.9rem) !important;
}
}

Thanks!

11

Hi @dmwwebartisan

Thanks, how can I make this solution to fit to this section specifically?

Section:

14625265319989__1645895189bf0b1a3e

Store URL:

wortheattt.myshopify.com

Thanks

12

Hi @dmwwebartisan

Can you help me with the last question of how can I make this solution to fit to this section specifically?

Thanks