Website logo not working for different dimensions

[degalbo2]

Hey I’ve been messing around with my site themmaguru.com on http://whatismyscreenresolution.net/

and whenever it’s on a screen resolution 1024 x 768 or something like 1024 x 600 it’s making my logo appear over the menu messing everything up… Is there a certain css code I can place in that will help out my website?

[Prasant]

Hello @degalbo2,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

@media screen 
  and (min-width: 1000px) 
  and (max-width: 1024px){
      .x-brand {
    width: 34%;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[degalbo2]

Hey I added that to the CSS however it didn’t help make the changes.

[jade]

Hi there,

Please try this:

@media (min-width: 980px) and (max-width: 1202px) {
    .x-brand {
        width: 30%;
        margin-top: 20px;
    }    

    .x-navbar .desktop .x-nav>li>a {
        font-size: 18px; 
    }
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://goo.gl/mFuWQT

• How to get CSS Selectors using Chrome - https://goo.gl/BmoH39

• CSS Media Queries - https://goo.gl/L3ZHNg

Please make sure to clear your cache after adding the code.

Hope this helps.