Logo size issue

7 posts from 3 voices

• Started 7 months ago by galleryj
• Latest reply from thk
• This topic is closed
• This topic is resolved

Tags:

• logo

1. 

   galleryj
   Member

   Hi,

   My logo is considerably larger than the one used in the demo. (428 px by 117 px) . It looks fine on desktop browser and when resized for mobile it fits nicely above the responsive drop down menu. However on the Ipad the normal menu (not drop down) ends up right in the middle of the logo due to the fact that the logo is 428px wide.

   I haven't changed the CSS or anything to change the image dimensions. Would this sort it out?

   In the admin next to logo upload the instructions state "Logo Dimension: 200px * 100px (if your logo is larger you might need to modify style.css to align it perfectly)" . However when opening style.css there is nothing there apart from instructions to edit the custom.css.

   Could somebody let me know what i need to do to sort this logo problem out?

   Many thanks

   Posted 7 months ago #
2. 

   galleryj
   Member

   I've added the following

   .logo a, .logo a img{
   width:428px;
   height: 117px;
   }

   to the custom CSS as mentioned in a previous post but this doesn't solve my problem. The menu still clashes with the logo when the scree is resized to tablet size.

   Thanks

   Posted 7 months ago #
3. 

   galleryj
   Member

   Any ideas please guys?

   Thanks

   Posted 7 months ago #
4. 

   Ismael
   Moderator

   Hi galleryj,

   Can you post a link to your site? so we can check it further.

   Regards,
   Ismael

   Posted 7 months ago #
5. 

   galleryj
   Member

   Hi. I can't post a link to the site but can email a link. Basically the logo doesn't reduce in size when the screen gets smaller so the menu ends up over the logo if you start with a wide logo.

   Thanks

   Posted 7 months ago #
6. 

   Ismael
   Moderator

   Hi,

   You can use Media Queries to resize the logo on different screen sizes. You can check css > layout.css and find #Media Queries to see how it works.

   Regards,
   Ismael

   Posted 7 months ago #
7. 

   thk
   Member

   Hello,

   As Ismael suggests, I placed the following css in my custom.css file, which brings the menu under a now centered logo, and which seems to solve the issue. You may need to tweak things for your specific logo / menu widths.

   Best, thk

   /* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {</p>
<p>.responsive .thumbnails_container .slideThumb{ margin-right:19px;}
.responsive .side-container-inner .minor-meta { text-align: center; }</p>
<p>/*thumbnail slideshow*/
.responsive .thumbnails_container .slideThumb{ margin-right:13px;}</p>
<p>/*dynamic*/
.responsive #top .callout{font-size: 30px;}
.responsive #top.yanone_kaffeesatz .callout{font-size: 40px;}</p>
<p>/*header*/
.responsive .main_menu{background: none; box-shadow:none;}
.responsive .main_menu,
.responsive .logo{ text-align: center; position: relative; top:auto; margin:0 auto; display:block; float:none; left:auto; right:auto; height:auto; padding:15px 0; clear:both; width:100%;}
.responsive .main_menu div,
.responsive .logo a, .responsive .logo img{display:inline-block; float:none;}
.responsive .header_meta{position: relative; margin:0; top:0;}
.responsive .header_meta #searchform {display:none;}
.responsive .header_meta .small_header_info{position: relative; text-align: center; bottom: auto; margin:0 auto; float:none;}
.responsive #top .social_bookmarks{position: relative; top: auto; clear: both; margin: 0; width:100%; overflow: hidden; text-align: center; height:40px;}
.responsive #top .social_bookmarks li, .responsive #top .social_bookmarks li a{display:inline-block; float:none;}
}

   Posted 7 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.