Logo resizing

[zaahideen]

i am currently polishing up my new website. (www.idauk.org)

it is a joomla3 website and i am using a responsive template. the issue i am having is that the top logo begins to CUT OFF when the screen size is 480px or less.

hence i have made a slightly smaller logo and want to use the following css rule:

@media screen and (max-width: 500px) {
#logo {
background: url(“http://www.idauk.org/images/homelogomobile.jpg”);
}
}

1. is my coding correct?

2. i have absolutely no idea as to which .css file i need to add this to. i have tried everything but the logo doesnt swap at 500px.

please help

[gitsraj]

https://codepen.io/anon/pen/rOQqMP

[sarahbellum]

Personally, I prefer to keep my logo in the html then make it responsive, or use media queries to adjust the size. See the codepen I created below. You can use a max-width or min-width if you feel it gets too large/small. I’m not a fan of using critical content as a CSS background. CSS should be styling only, keep the content (like logos) in the html.

See the Pen Logo Resize Example by Sarah Beth (@sarahbellum) on CodePen.

It is pretty problematic that you don’t know what style sheet to add the code to. Is this a template where you can access all the code?

In a situation where you have no control over the all the files and tried every way to find it, you may need to override it with an !important (which I hate doing) but only if it is necessary.

[zaahideen]

thanks for the reply sarah, however nothing is showing up on the codepen link

possibly repost it?

thanks

[sarahbellum]

That is odd, it worked fine on my end. http://codepen.io/sarahbellum/pen/OyaqZd

Maybe the full link will help. All I did was add:

.logo img{
  max-width: 100%;
  height: auto;
}

[gitsraj]

Try
http://codepen.io/gitsraj/pen/dYwGyj

[Author]

Posts