If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

CherryFramework 4. How to change the logo size for a specific browser width

CherryFramework 4. How to change the logo size for a specific browser width

Sometimes your logo picture appears smaller than the demo logo block. This tutorial is going to show you how to increase the size of that block to display the logo in full size in a specific view:

CherryFramework_4._How_to_change_the_logo_size_for_a_specific_browser_width-1

In order to increase the size of the logo for a WordPress Cherry 4 template, you should perform the following:

  1. Log into the Dashboard and go to Cherry – Statics editor. In the Header Top section you’ll see the Logo and Header Menu sub-sections. Each of them has 4 class prefixes for different devices:

    • .col-lg- Large devices, Desktops (>=1200px);

    • .col-md- Medium devices, Desktops (>=992px);

    • .col-sm- Small devices, Tablets (>=768px);

    • .col-xs- Extra small devices, Phones (<768px):

    CherryFramework_4._How_to_change_the_logo_size_for_a_specific_browser_width-2

  2. Go to the Logo sub-section. Choose the class prefix for your device and select the bootstrap class for a bigger number of columns that you have had before. For example, change .col-sm-4 to .col-sm-5.

    Do the opposite in the Header Menu section. For example, change .col-sm-7 to .col-sm-6. The number of columns in the Header Top section should sum up to 12.

  3. Save the changes by clicking on the Save statics button. Your logo should have a bigger size now:

    CherryFramework_4._How_to_change_the_logo_size_for_a_specific_browser_width-3

Feel free to check the detailed video tutorial below:

CherryFramework 4. How to change the logo size for a specific browser width