CSS to replicate .h-responsive

[muriel]

Hello!

I’d like to replicate the responsive headline (‘Services’) on this page which is built with the Pro page editor, so that I can create the same responsive headline on another page, on the title ‘Recipes’, using WPBakery (which I used to take advantage of the post grid & filter functionality).

How might I get the exact same result in CSS, to paste into the Recipes page?

[marc_a]

Hi Muriel,

Thanks for reaching out.

Replicating the header responsive of the Pro theme is a tricky thing because every time the window size changes it also automatically change the size of the headline. I suggest that we will just fix the headline on your mobile view by adding this code in Pro > Theme Options > CSS.

@media(max-width: 767px) {
  .page-id-113 .vc_custom_heading {
    font-size: 48px !important;
  }
}

Or you could try creating a Global Blocks and create your headline using Pro elements and just copy the Global Blocks shortcode in your Recipes page using the WP Bakery editor.

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer.

Hope that helps.

Thank you.

[muriel]

Thank you! I tried the latter option (using Global Blocks) but unfortunately there’s no option to add responsive text that way (it doesn’t come up as an option in the settings). I used the CSS code you suggested, that solution is good enough for now.

[marc_a]

Hi @muriel,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.