Cannot get the logo to be responsive

HTML & CSS
1

Hi…
I am new to websites and trying to learn responsive design. I have a logo on this site my link. Even though I have applied

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

to the logo, it is not becoming responsive. What am I doing wrong here?

My HTML is …

2

Hi there kali,

try it like this…

.site-logo { width:40.44%; } .site-logo img { display:block; width:100%; height:auto; }

coothead

1 Like
3

Coothead… thank you very much! Your solution works!. Can I ask why width:40.44% and not 100%? …
display:block; to the img itself is also new to me. Can you explain please? :grinning:

4

Hi there kali,

oooops, sorry about that, I gave you the wrong code. :cold_sweat:

That was my original test code. :flushed:

This is what I should have posted…

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

coothead

2 Likes
5

@coothead Thank you! The new code works as well. And I understand that code better. Thank you very much!

6

 

   No problem, you’re very welcome. :smiley:

 
coothead

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.