Header is not responsive

  • Author
    Posts
  • #105027

    noisetteco
    Member
    Original poster

    Hi,

    I made a cute heart banner for my homepage but it only looks good on desktop screens with a large width. How can I get it to scale? Note: I tried editing the CSS to add a note “max-width: 100%” but this removed the logo from mobile and tablet view. Thanks!

    The blog I need help with is: datingcarbs.com

    #105129

    designorbital
    Theme Author

    Hi,

    I think you are asking about the background image of header. Background image of header is fully responsive. It uses CSS rules to adjust the image according to viewport.

    Here are the CSS rules that may help you further,

    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    Thanks

    #105130

    noisetteco
    Member
    Original poster

    Hi,

    Thanks for the quick response!
    I’m referring to the header image (the one that is recommended 1920×150 px). I designed one roughly that size.

    Here’s what I have in the CSS fields, but so far nothing is scaling?

    .site-logo {
    height: 160px;
    max-height: 160px;
    width: auto;
    padding-top: 0;
    }

    .site-header {
    background-position: cover;
    }

    #105185

    designorbital
    Theme Author

    Hi,

    I am unable to see your blog as it is marked private at the moment. But, you have no need to write above snippets.

    Background position cover will adjust the background image automatically.

    Thanks

The topic ‘Header is not responsive’ is closed to new replies.