This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Problem with logo size

Open 5 replies themetheme-vantage
rschalkwijk
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 11 years, 1 month ago

    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. rschalkwijk 11 years, 1 month ago

    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. Andrew Misplon Staff 11 years, 1 month ago

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

  4. rschalkwijk 11 years, 1 month ago

    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. Andrew Misplon Staff 11 years, 1 month ago

    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.

Have a different question or issue?

Start New Thread