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

    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.