Logo resize – center

[fmora617]

Hi guys,

I am looking to make my logo look like this –> http://i.imgur.com/rUzCSA3.png …it is one large image basically.

I tried changing the width in Theme Options > Header Options with no luck. Any idea how I can make it look like that?

Thanks!
Fabian

[Kyle – SUPPORT]

Add this to your custom css:

#logo.logo-center.col-sm-4 {
  width: 100%;
}

– Kyle

[fmora617]

Hi Support-

This CSS did not fix the issue. Any other suggestions?

Fabian

[Kyle – SUPPORT]

Have you set a max width of 320px in your header options?

– Kyle

[fmora617]

Ah yes! You are right! I had this previously for mobile:

/****Makes logo on mobile center justified****/
#logo img, #logo img.retina {
max-width: 320px;
}

However, now I am seeing this is Mobile –> http://i.imgur.com/RuouZEL.png

Any ideas how to fix? Possible media query?

Fabian

[Kyle – SUPPORT]

Add this

@media only screen and (max-width: 479px) { 

#logo img, #logo img.retina {
  max-width: 300px;
}

}

and remove this:

#logo.logo-center.col-sm-4 {
  padding-right: 75px;
  width: 100% !important;
}

– Kyle

[fmora617]

Hi – I did exactly what you told me however is messed up desktop back to this –> http://i.imgur.com/Vkt9bQW.png

Because this site is live I reverted back to this:

/****Adjustments for new GCA and GR logos in site header****/
#logo.logo-center.col-sm-4 {
width: 100% !important;
padding-right: 75px;
}

/****Adjustments for new GCA and GR logos in site header FOR mobile****/
@media only screen and (max-width: 479px) {
#logo img, #logo img.retina {
max-width: 300px;
}
}

The mobile version is still a little off –> http://i.imgur.com/qePs8m7.png If possible I would like to shorten the height of the mobile logo so it will right.

Any ideas?

Fabian

[Kyle – SUPPORT]

Try adding this

@media only screen and (max-width: 479px) { 
#logo.logo-center.col-sm-4 {
  padding-right: 0;
}

– Kyle

[fmora617]

Hi – that did not work 🙁

Here is what I see on mobile –> http://i.imgur.com/3PP2OPn.png

[Rui Guerreiro – SUPPORT]

Hi,

It was missing a closing bracket in the previous code.

try this one

@media only screen and (max-width: 479px) { 
#logo.logo-center.col-sm-4 {
  padding-right: 0;
}
}

-Rui

[fmora617]

Hi – Yes, I noticed that and added the missing bracket. I am still seeing the same issue.

Any other ideas?

[Kyle – SUPPORT]

Hi

I’m not seeing the CSS in your Custom CSS?

– Kyle

[Rui Guerreiro – SUPPORT]

Hi,

Would you like something like this?
https://www.dropbox.com/s/n8lo99aukp4v723/mobile_logo_mockup.png?dl=0

Just trying to figure out what exactly you need.

-Rui

[fmora617]

Hi Guys –

The CSS is there. Here is what I have:

/****Adjustments for new GCA and GR logos in site header****/
#logo.logo-center.col-sm-4 {
width: 100% !important;
padding-right: 75px;
}

/****Adjustments for new GCA and GR logos in site header FOR mobile****/
@media only screen and (max-width: 479px) {
#logo.logo-center.col-sm-4 {
padding-right: 0;
}
}

This is what I am trying to achieve –> http://i.imgur.com/dF4ih7v.png

Note that I have this as one image.. http://golfrite.com/wp-content/uploads/2013/10/GCA_and_Golfrite_logo_header_2.png

Thanks guys!
Fabian

[Rui Guerreiro – SUPPORT]

Hi,

It’s getting difficult to find a solution, will have to forward to our development team so they can help us out.

Let’s wait for the reply.

-Rui