Crio theme title doesn’t load correctly on mobile devices

Hi Yasir,

Thanks a lot for reaching out with your Crio Pro WordPress theme questions. We’re happy to help with your Page Header, let’s first clarify exactly what it is that you want to do.

When inspecting your page header on mobile here’s how it looked on our end:

And here’s how it looks with the Hamburger Nav Menu expanded:

If you can explain exactly where you would like your elements to be placed I’m sure we can assist you further with this. It would also be helpful to know how you’re implementing your page header. If you’re using the native Crio page headers you can change the layout of your page headers from the Design > Header > Site Header Layout > Select Layout.

You can also use a Custom Crio Page Header to capture the desired layout of our page header. Custom Page Headers in Crio use the same drag and drop functionality as the BoldGrid Post and Page Builder. We have a video you can follow that shows how to set this up in your Crio theme.

I hope this helps Yasir. We look forward to assisting you further with this if need be!

Hi Yasir, thanks for clarifying that!

I inspected the header text in your “Hero section” and it looks like you have too much padding added to the column that holds your text causing it to bunch up like this.

I would go about resolving this by duplicating the row that holds your text (Hover over the text and click the hamburger of the “yellow” tab that appears to pull up its options and click “Clone“), then use the responsive utilities in Post and Page Builder to hide the original row that holds your text on “Mobile Devices” and “Tablets”. Also hide the newly created row of text on “Desktop” and “Laptop” screen sizes.

After that, switch to the “Phone View” screen by clicking the “phone” icon in your editor toolkit so that you can view the page from a mobile perspective.

You should only see one row of text for your title. Hover over the text again but this time choose the “blue” column hamburger toggle and click “Advanced Control“, and here you can adjust the padding on mobile devices only for your element.

I hope this helps Yasir! Please let us know if you have any questions!