Smaller screen shrinks the image too small

[ChrisjChrisj]

When the .png image is viewed full screen it looks fine, but in the smaller screen (mobile) it’s much too small for the container.

Here’s the code:

<div class="box9 right">
<span><img src="/images/bulb.png"></span>
</div>

.box9 {
   margin:1px 2px 0px 2px;
   padding:0px 8px 0px 8px;
}

.box9.left {
text-align:top;
border:1px solid #;
padding:20px 0px 20px 0px;
margin:1px 2px 10px 60px;
 font-size:20px;
 font-weight: 100;
 font-family:"Open sans", Helvetica, Arial";
}

.box9.right {
 text-align:top;
 border:1px solid #;
padding:10px 7px 0px 5px;
}


@media screen and (max-width:600px) {
	.nowrap{display:block;
	text-align:center;
	}
	.box9.left{
	padding:15px 0px 15px 150px;
	margin:0;
	background-color:#;
	}
	
	.box9.right{
	padding:0px 0px 0px 0px;
	margin:0 100px 0 0;
	background-color:#ffffff;
	border:1px solid #;
	}
	.box9 p{
	margin:0;
	}
}

How do I make the image not appear so small on the smaller screen view?
Any help will be appreciated.

[ronpat]

Please read our guidelines for posting code. Note the ways in which you can help us help you by including complete “working page” with all relevent code in your first post.

Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this: http://codepen.io/oknoblich/…

Please validate your code before posting.

Include images, URLs to images or placeholders, or sizes of images as needed, etc.

Include screen shots showing differences between desktop and mobile views, if needed.

You may find it useful to add outlines or background colors to boxes when testing. For example, at this time, I see nothing when rendering your code in a desktop browser.

[ChrisjChrisj]

Thanks for your reply.
Regarding " at this time, I see nothing when rendering your code in a desktop browser."
Do you mean you see “nothing” or you don’t see the image problem?
As stated “image is viewed full screen it looks fine”, which by that I mean ‘desktop’. It’s the mobile view that changes the image to disproportionatly too small.

[Ray.H]

@ChrisjChrisj

Do you mean you see “nothing” or you don’t see the image problem?

I’m sure he means “nothing” since you did not provide bulb.png for us to test with. Or any indication of it’s size so a placeholder image could be used instead.

You would see nothing too if you did not have the image on your machine.

In regards to your CSS, I see no styles for the span or the image to control the image size.

Likewise, it looks like the bulb image is rather small ( like an icon) so it probably does not need to be scaled down for mobiles. That way it would not be getting “too small”.

[PaulOB]

@ChrisjChrisj

Do you mean you see “nothing” or you don’t see the image problem?

The code you posted doesn’t exhbit the problem you are trying to show us. It shows the full size image at all times.

As Ray said above the rules that resize the image (or its container) are not present so we can’t see how you are making it smaller.

l’m guessing a simple min-width on the image would do the trick but if the container is being sized in percentages and the image width is 100% then the container needs the min-width instead but of course this could break other columns. Without seeing the structure you have its hard to give a useful answer