[Resolved] Different stylings for H1 tag

[Christopher]

Hey guys,
on my site https://montenegrotower.com/ ive got this headline:

its my H1 tag and important for SEO, including my focus keyword “COWORKING SPACE IN MONTENEGRO”

However, I had to make the font smaller on the second line and for that I created a second H1 tag with different styling. I would however prefer to just have one H1 tag, can I perhaps achieve the same font settings using CSS code within the same H1 Tag?

Hopefully that makes sense 🙂

Thanks
Chris

[David]

Hi there,

might be a bit if head twister but here goes.

If you create a single H1 Headline.
Type your first line
Then hit Shift + Enter, to insert a line break ( <br> ) in that same H1.
You now have two separate lines in your single H1.

If you give that H1 Headline a CSS Class we can target eg. multi-line-title

You can then use the :first-line pseudo selector to target whats on the first line eg.

.multi-line-title:first-line {
    /* Styles for line 1 */
}

and

.multi-line-title:not(:first-line) {
    /* Styles for lines 2 onward */
}

But heres the thing, :first-line isn’t what comes before the line break, its what you see on screen.So you must ensure that WELCOME TO THE MONTENEGRO TOWER! always remains as one line on all screen sizes ( as it does now )

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christopher]

Thanks David! Awesome support as usual.

Before I proceed, a quick question: Ive uploaded the font used here (Oswald) to my server in order to avoid having to use the Google fonts, hopefully resulting in a tiny bit faster website.

When I use the CSS to style rather than the interface where I can toggle-off the Google fonts, do I have to put in some special command for that or just regular and the site will use the uploaded font on my server?

Btw, I wanted to thank you again for all your help, the website is pretty finished now and I am very pleased with how it looks and feels 🙂

Thanks!
Chris

[Ying]

, do I have to put in some special command for that or just regular and the site will use the uploaded font on my server?

That’s correct.

[Christopher]

Hi Ying, whats correct – that I have to put in a special command or that the site will use my uploaded font with the standard comment? 🙂 THanks

[Ying]

Sorry for the confusion, I mean you don’t have to put any special command… lol my bad!

[Christopher]

Hehe awesome, thanks!

Is there any quick way to “export” the exact settings that I have applied including Font, size, borders, padding, margins etc to CSS format? Just to make sure that I wont forget anything. That would be a great feature for future scenarios with more complicated settings.

Cheers,
Chris

[Ying]

Do you mean the settings of GP customizer? or the settings of GB blocks?

[Christopher]

I am not sure about the difference of customizer and blocks, I was just generally referring to all the settings that make the text look they way it looks now pretty much. Maybe that makes more sense 🙂

[Ying]

If your typography settings are mainly in the customizer, you can export the settings at appearance > GeneratePresss > Import/export.

You will get a file which can be imported to your next site 🙂

GB doesn’t have this option as it doesn’t have general settings, all the settings are individually added to blocks.

[Christopher]

Thanks, the question was how to get it into the CSS format to use for the above workaround by David. Is that possible as well?

[Ying]

No that’s not possible, you’ll have to manually do that.

[Christopher]

Ah ok too bad, sadly i dont know how to get all the settings in CSS, but its okay I will leave it as two H1 for now. I will look into this again when its a bit less busy 🙂 Thanks!

[Ying]

No problem 🙂

[Author]

Posts