CSS style override not working

I Need Help
1

Somewhat of a n00b when it comes to CSS - dont really understand why this problem occurs some places and not others…

so I design a site… looks lovely on desktop and tablet… H1 font size too big for mobile.

Add a class to the H1 to try and reduce the font size… nothing. no matter what I add to the ‘size’ option in css role - text doesnt budge.

Typeface, size and weight do nothing no matter what i change. All rest of settings work fine.

In the good ol hacky days i’d just add ‘!important’ to the rule but I cant actually get into the CSS from within Blocs right?

link to video of the problem: Dropbox - tag issue.mov - Simplify your life

any ideas?

2

Hey,

You have manually set the typeface to be big in the sidebar. Click on the ‘x’ to reset it to the default, then add custom class and adjust the way you want.

OR, just adjust the size in the sidebar. When you adjust it in the sidebar WHILE in mobile mode, it will only change for mobile view.

Cheers,
Eldar

3

“OR, just adjust the size in the sidebar. When you adjust it in the sidebar WHILE in mobile mode, it will only change for mobile view.”

oh, ha - I swear this didnt use to work! oops.

yes works perfectly and makes way more sense that fiddling around with classes.

cheers Eldar!

1 Like
4

Welcome to responsive web design. Using the sidebar is the easiest way to adjust text sizes on all three device size choices.

I find using classes will give you a lot more control over everything. I use it a lot to control padding and margins between the different device choices. Once you have a class you can easily reapply it throughout the site.

Classes is the most powerful tool in Blocs.

Casey