Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #16623


    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


    I’ve added the following

    .logo a, .logo a img{


    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.



    Any ideas please guys?



    Hi galleryj,

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




    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.




    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.





    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>


    .responsive #top .callout{font-size: 30px;}

    .responsive #top.yanone_kaffeesatz .callout{font-size: 40px;}</p>


    .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;}


Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Logo size issue’ is closed to new replies.