Forcing a head over an image paralax to be super large

Hi there, just on my development site at http://woocommerce-128120-1291042.cloudwaysapps.com/ I want to make the “we love local” super sized so that it is impactful. It appears to be working using a piece of code under the style parameter in the element editor but doesnt work when out of cornerstone.

Any ideas why?

margin: 7.5% 0; line-height: 1; text-shadow: 0 0 35px #000; text-transform: uppercase; color: #fff; font size: 90px;

is the code im tryna use

This shows what Im tryna achieve

ive also set bebas neue as the header font and it doesnt seem to be appearing for me??

Also unsure why this footer is suddently not matching the rest of the site?

Hello @rabbler,

Thanks for posting in!

1.) The custom inline css do not work because WooCommerce Checkout On Popup plugin is overriding the styling of the headline. Please disable the plugin and check your heading again.

2.) The same happens to the “Our Buzz” heading. Disable the plugin and test again.

3.) The footer has a white background color by default. If you want to customize the footer, please go to Pro > Footers and create a custom footer replicating the current footer design. With your custom footer, you can select different background colors and design elements.

Hope this helps.

I need to use shopify to run the shop, so cant turn that off. How do I force all headings to use Bebas Neue?

I just want to turn the icons and text in the footer to black or the brown that is on the site, nothing more - how do I force this?

Hi, I fixed the heading issue over the opening we love local parallax by using a n image file.

Is one of your team are missing with the headings settings now? As they have suddenly become ridiculously super sized where as my intention was simply to make them bebas neue

Headings using the h2 tag seem to be insanely over sized on mobile view? how come? it wasnt like this before

even the body font is super large

Hi @rabbler,

It’s due to root font size that you set in Theme Options > Typography,

Even your maximum font size is lower than minimum. Max should be greater, and 30px size is too big for mobile.

Thanks!

Thanks, I think the way this presents itself in terms of scaling versus stepped confuses me.

What wud you recommend as a good font size to go with based off what ye use on your demo themes? This site is based off the spa theme I believe.

Hi @rabbler,

This is just my own opinion but the ideal for stepped mode would be 14px on XS, and SM, 15px for MD, then 16px for LG, and XL. But really this would depend on your design if you need smaller text you would set this lower.

However, since you already set most of your text content to 2rem, you might want to set your Root Font Size lower than what I advise, because 16px x 2rem = 32px which is way higher than what you have now (20px). Play around with the value until you get the desired amount, probably from 6px - 10px.

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.