Why the Header is not Resizing in Mobiles?

  1. Home
  2. Docs
  3. Event Manager
  4. Frequently Asked Question...
  5. Why the Header is not Resizing in Mobiles?

Why the Header is not Resizing in Mobiles?

This theme is mobile compatible, so when opening in a mobile browser it loads with a mobile version of the site. The site will be vertical, single column and the image will crop to optimize.

However you can follow this procedure to create an specific logo for mobile devices:

1. Backup the original files before making any changes and be careful while editing.

2. Create a new logo suitable for mobile devices, we can say like 300px width and 50px height.

3. Upload logo to /wp-content/themes/event-manager-0.9.5/event-manager/images, please note the filename of the image.

4. Navigate to Appearance>>Editor, open the style.css and look for

/* Resize Site Title */
#header #title {
font-size: 48px;
line-height: 50px;
margin: 20px 10px 10px;
}
(near line 1736)

5. Add this line to this piece of code:

background:url(images/logo.jpg) no-repeat !important;

(logo.jpg is the filename of the new logo, if the image is in any other formate like png or gif please mention it, eg logo.png, mobilelogo.gif etc)
You should now have a code like this: #header #title {
font-size: 48px;
line-height: 50px;
margin: 20px 10px 10px;
background:url(images/logo.jpg) no-repeat !important;
}

6. If the mobile logo height is greater than 50px, please change the line-height (2nd line) to the same hight as the logo.

7. Update the file.

Was this article helpful to you? Yes No