Tagged: 

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

    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

    #92243

    Any ideas please guys?

    Thanks

    #92244

    Hi galleryj,

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

    Regards,

    Ismael

    #92245

    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

    #92246

    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

    #92247

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

    }

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

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