Change module header text colour and logo size on mobile

Hi there,

I am using the University template for http://www.sportingcircles.com and all is looking good.
However, I would like to change the "Online Now" module text header so that it is white and not black. I am using the transparent suffix at the moment but was wondering if either I needed to do an override or if I could use another standard suffix to do this?

Additionally I am trying to load up a smaller logo for mobile use. I am using the following code which I found elsewhere:

@media (max-width: 640px) {
.svg #gkLogo.cssLogo {
background-image: url("../images/logomob.png");
}
}
I added this to override.css and enabled css override in the template settings, and added the file logomob.png to the images directory but still the logo is showing the normal desktop size logo. Any ideas?

Thanks a lot,
Rupert

OK I can't quite believe it but I managed to fix this with a CSS Overwrite as follows:
#gkHeaderRight h3 {color : white}

It worked.

If anyone has any ideas on the mobile logo that would be really appreciated.

Thanks a lot,
Rupert

Hi

Code is not working because You are using image not a css version of logo. Just add this to override.css and logo will resize fitting to the size of device.

Code: Select all

#gkLogo img {
    max-width: 100%;
}


That worked perfectly! Thank you SO much!!

Hi

No problem. Glad I could help Thread closed.