Home>Support>Problem with logo size

Problem with logo size

By rschalkwijk, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi there,

For my website I’m using the child theme which shows te slider before the menu. With css I now placed the logo of my website over the slider, but I’m having some problems with the size of the logo on different devices/screenresolutions. As you can guess I need some help to show the logo in the right size.

URL: http://www.bbq-junkie.nl

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi rschalkwijk

    It’s not looking too bad right now, seems to be re-sizing and centring for mobile. Did you perhaps make some progress here. If not, can you let me know more about the changes you’re looking to make.

  2. 9 years, 8 months ago rschalkwijk

    Hi Andrew,

    I did make some progress. Totally forgot to give an update. I used he following css to scale my logo and hide the slider for small screenresolutions, because I think the slider is too small at mobile devices. Perhaps you can take a look at my css and see if you have some advice?

    /* Vantage Logo Aanpassingen */

.hgroup img {
  max-height: 250px;
  width: auto;
}

.home .hgroup {
  position: absolute;
  top:-250px;
  left: 5px;
}

.hgroup {
  margin: 0px !important;
  padding: 0px !important;
}

.home.layout-full #page-wrapper .full-container.hgroup {
    position: absolute;
    top: 0px;
}

@media (max-width:625px) {
  .home.layout-full #page-wrapper .full-container.hgroup {
    position: relative;
    top: 0px;
  }
  
  .metaslider img {
    display: none !important;
  }
}

@media (max-width:1200px) {
    a.logo img {
        width: 267px;
        height: 200px;
    }
}
@media (max-width:1000px) {
    a.logo img {
        width: 250px;
        height: 187px;
    }
}
@media (max-width:860px) {
    a.logo img {
        width: 200px;
        height: 150px;
    }
}
@media (max-width:670px) {
    a.logo img {
        width: 167px;
        height: 125px;
    }
}

    Thnx!

  3. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    CSS looks great, the site is working well. Nicely done.

  4. 9 years, 8 months ago rschalkwijk

    Thnx,

    One last question for now. Can you give me some direction in changing the way the header gets cropped? When I watch my website on an iphone for example the header gets cropped, I think from the left and top side. Is there a way it gets cropped from the center for example?

  5. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Sure. You could try the following:

    @media (max-width: 680px) {

header#masthead {
background-position: center;
}

}

    http://www.w3schools.com/cssref/pr_background-position.asp

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More