• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 250
  • Last Modified:

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!
0
bbdesign
Asked:
bbdesign
  • 2
  • 2
1 Solution
 
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
 
bbdesignAuthor 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
 
bbdesignAuthor Commented:
Found solution on my own by analyzing CSS code.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now