Problem styling image to fit in DIV for mobile devices

This URL:
http://gethcem.com/recent.asp

Click any of the orange names on that screen. Then close the width of your browser to less than 35em to flip it into "mobile mode". The logo is too tall. Here is the non-mobile CSS:

#cemeterylogo{float:left;width:326px;text-align:center;margin-top:18px;margin-bottom:18px;}

Here is the mobile CSS:

#cemeterylogo{float:none;width:100%;height:auto;margin-top:0.5em;}
#cemeterylogoimg{width:80%;height:auto;}

I don't understand why the container DIV is not expanded along with the logo. Here is the HTML:

<div id="cemeterylogo">
<a href="default.asp"><img id="cemeterylogoimg" src="15/cemetery-logo.jpg" border="0" /></a>
</div>

Would appreciate any advice. Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
 
Brad BansnerConnect With a Mentor Web DeveloperAuthor Commented:
In the meantime, I was able to solve this. My styling was a bit off, I had some styles on the DIV that should have been on the IMG and vice-versa. Thank you for checking, you probably loaded it after I had already fixed it.
0
 
COBOLdinosaurCommented:
When I click on the orange names all I get is a fatal server error.

Cd&
0
 
COBOLdinosaurCommented:
The other thing is, if you are going to use modern mobile technology, you might want to upgrade the 20th century code to something a little closer to current standards.

Cd&
0
 
mcnuteCommented:
Well on my firefox everything is fine. Maybe you tell us what browser you're using, please.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Found solution on my own by analyzing CSS code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.