CSS help for font size on mobile

1

I have a site I made for my daughter here: The site is here:
and I’d like the main slider heading at the top to be a smaller font size so that it fits properly on mobile screens.
I’ve been playing around in RW and I can see that I should be targetting h1.display-3 but I don’t know how to target only mobile (and if it is different with Foundry/Bootstrap - sometimes I see the media query as xs/sm/m/l, and sometimes in pixels or em…).
Anyway, I’m sure this is child’s play for one of you

2

Wait, I think I have it. Does this look right:
@media (max-width: 768px) {
h1.display-3{font-size: 48px;}
h2{font-size: 24px;}
}

Seems to work in RW preview…

1 Like
3

That looks like the sort of thing you need. You may need an additional smaller one because 768 is pretty wide. As you found out, you can use px in the media query.

2 Likes
4

That seems to change it for all the H1’s, I need to target just the slider. I’ll keep fooling around though, I’ve gotten farther than I thought originally.

5 
@media (max-width: 768px) {
   .flexslider .display-3{
       font-size: 48px!important;
   }
}
2 Likes
6

Thanks!
Here’s the extra bit for the sub-title below, in case it’s of use to anyone else…

    @media (max-width: 768px) {
       .flexslider .display-3{
           font-size: 48px!important;
       }
       .slides h2{
       		font-size: 20px!important
       }
    }
1 Like
7

Glad you got this sorted out. Shame really that you can’t go back and add this useful information to the thread that is now closed. I would think that many would like to have this information. Oh well.

1 Like
8

That isn’t currently a feature of the stack.

(Is there a “dick” emoji thing on this forum?)

1 Like
9

It does seem like a favorite phrase over there. And in the time it took him to write his reply, Tav sorted me out. Whatevs

10

(You may or may not get that reference!)

1 Like
11

Yeah, that one’s over my head haha. I even Wikipedia’d it