CSS Error – Header Logo

  • Resolved georged018

    (@georged018)


    5 years, 6 months ago

    Hi

    I have a simple wordpress site using the Ashe Theme that i am developing but when adding in additional CSS to move the site title to the top. The CSS seems to work ok for Desktop but from mobile or tablet half the title is off the page

    Apologies, i’m new to CSS so not sure what why i am getting this error

    This is the CSS Code that i am attempting to add;

    .site-header {
    min-height: 50px;
    }
    .header-logo {
    max-width:80%;
    position:relative;
    top: -90px;
    display: inline-block;
    height: 100px;
    margin: 0 auto;
    }

    Thanks for your assistance

    • This topic was modified 5 years, 6 months ago by georged018.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    This is a bit challenging to troubleshoot without the link to your site/page with the issue.

    Also, you should post your question to your theme’s tech support team or forum, if you haven’t yet. You might have better luck there. And, technically this forum doesn’t support commercial theme related questions.

    Lastly, your terminology is confusing to me. You state that you are having issues with the site title. Yet the CSS code you provided is mainly for a logo. Does the site title and the site/company logo mean the same thing to you?

    Good luck!

    If the theme you are using is responsive it is most likely using meta queries for different breaking points on your site. If you look through your css you will see statements like @media screen and (min-width: 980px). This tells the css that any screen that has a screen greater then 980px should use the css defined in that section.

    you probably have changed the statements in your css for the desktop but not for the mobile or the tablet settings. You would have to locate the meta queries for the mobile and tablet and make the changes in them

    • This reply was modified 5 years, 6 months ago by mrtom414.
    • This reply was modified 5 years, 6 months ago by mrtom414.

    I installed the Ashe theme and took a look at how the CSS works. As others have mentioned, most themes will have some media queries that allow the page to rearrange itself at different screen widths. The problem with your CSS is that the top property of -90px is shifting the title too high at mobile widths. So what you might want to try doing is enclosing that rule in a media query so it is active just on desktop sized screens. Try something like this:

    
@media screen and (min-width: 980px)
{
   .site-header {
      min-height: 50px;
   }
   .header-logo {
      max-width:80%;
      position:relative;
      top: -90px;
      display: inline-block;
      height: 100px;
      margin: 0 auto;
   }
}

    I picked 980px as the break point because there’s another media query that sets the menu to a mobile menu at that width, although you can change it to whatever value you wish (just adjust the width on your desktop browser to see the effect).

    Thread Starter georged018

    (@georged018)

    Thanks all, been away so first chance to get back to this. Thanks for your help:)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS Error – Header Logo’ is closed to new replies.

Tags