Adjusting for Mobile Responsiveness in Crio WordPress Theme

Hi Dee!

Thanks so much for reaching out with your Crio Pro WordPress theme and BoldGrid Post and Page Builder questions.

I’m sorry to hear you’re having some issue with mobile responsiveness in your theme but lets see if we can help you out. Lets start with your first question:

1.) Logo Size in Mobile Nav Bar – I think the best way to go about resizing your logo is to use a 3rd party platform like Pixlr to resize the image to the suggested 400px x 100px. Then if you would like to further you could use custom CSS to adjust the height and width of your logo. For example if you want to change the dimensions to 280px x 80px you could add this bit off CSS to the CSS/JS editor section of your WordPress Customizer:

  @media only screen and (max-width: 600px) {
  .custom-logo-link:not(.bgc_logo) {
    width: 280px !important;
    height: 80px !important;
}
 }

We apologize for the outdated documentation you may have come across. If you can link me to that page we’ll get that updated right away.

2.) Inline hamburger menu on mobile – One great thing about your Crio theme is you have the ability to structure your page headers in many different ways. What you should do is open your WordPress Customizer and navigate to design < Header < Site Header Layout < Select Layout and switch your site header layout to one that better fits your needs.

To take it a step further you can also create a custom page header for your Crio theme. The Custom Page Header editor allows you to create a custom page header from scratch using the same drag and drop functionality as the Boldgrid Post and Page Builder.

3.) Font size of various headers on mobile – You can control responsive text size in your theme from the WordPress Customizer Fonts section.



Using this control, you can set unique font sizes for Large Desktop, Desktop, Tablet, and Mobile. We strongly recommend you add responsive typography as it improves website user experience. You can enter responsive font sizes for Main Text, Headings, Site Title, and Tagline.

4.) Container widths on mobile – You can use the responsive utilities in Post and Page Builder to adjust your content for smaller screens. These controls are very similar to the global typography controls the WordPress Customizer.



You can use these Responsive Utilities to control how elements appear on various device sizes.

I hope this helps Dee! Please don’t hesitate to reach back out if you have any other questions for us.