This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Wide logo, social icons overlapping when scaling down responsively

  • Creator
  • #11968

    I’m discovering this great theme and I’m stuck with a problem.
    I’ve a logo 750px wide, when the screen goes smaller than 980px wide the logo is resized to 703px but the themeblvd-contact-bar goes on top of the end of it. Is there a way to resized the logo to a smaller width for the <980px screen size? 541px will be perfect.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
  • #11983
    Jason Bobich


    The theme is designed for a smaller logo there, but what you’re asking could be possible with of some CSS tweaks I think. An easy way to target the different viewport sizes is to wrap your CSS snippet in a @media query. So, for example, you could style the width of the logo to have a certain width only when the viewport is below 980px:

    @media (max-width: 979px) {
    	.tb-image-logo img {
    		max-width: 541px;


    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.


    Working perfect. Thanks!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.