simple responsive CSS/HTML - centering an image on mobile

Hello,

For some reason, my ask-a-nurse image on mobile is not centered. It's the nurse image at the top of the page.

The buttons under it are centered on mobile, but the nurse picture isn't. Could you tell me how to center it and keep everything else the same on all devices?

www.idiaper.com

<div id="iconDiv-nurse" style="text-align:center">
<a id="nurseImg" href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img id="left-nurse1" alt="ask a nurse button" src="http://www.idiaper.com/assets/images/left-nurse2.jpg"></a><div id="nurseLinks">
  <a href="http://www.idiaper.com/womens-diapers"><img alt="for women button" src="http://www.idiaper.com/assets/images/women-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/Auto-Reorder_ep_43-1.html"><img alt="auto-reorder button button" src="http://www.idiaper.com/assets/images/auto-ship-nurse3.jpg"></a><a 
  href="http://www.idiaper.com/mens-diapers"><img alt="for men button" src="http://www.idiaper.com/assets/images/men-nurse.jpg"></a><a 
  href="http://www.idiaper.com/overnight-adult-diapers"><img alt="overnight products button" src="http://www.idiaper.com/assets/images/overnight-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-pullups"><img alt="pull ups button" src="http://www.idiaper.com/assets/images/pull-ups-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-cloth-diapers-briefs"><img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/acd-nurse2.jpg"></a>

</div> 
</div>

Open in new window


#nurse-cat
{
float:left;
background-color:#3690cf;
color:#fff;
font-weight:normal;
padding:1%;
padding-right:2%;
}

#nurse-cat a,#nurse-cat a:hover, #nurse-cat a:visited
{
text-decoration:underline;
}

#nurse-cat a:hover
{
color:#9fa2a3;
}
#nurse-cat a:visited
{
color:#46c4ff;
}

#nurse-cat img
{
float:left;
margin-right:10px;
}


@media screen and (max-width: 600px){

#nurse-cat img
{
width:135px;
}

}

Open in new window

LVL 7
weikelbobAsked:
Who is Participating?
 
Snarf0001Connect With a Mentor Commented:
Only a small change is needed.  In your mobile query, you have the anchor containing the nurse image defined as display:block
Which means by default it's still going to take the row and ignore the spacing:

@media screen and (max-width: 600px){
   #nurseLinks {display: block; width: 100%;}
   #nurseImg {width: 283px;display: block;}
}

Open in new window


By default it would be inheriting inline block from the main layout, just leave it as that and remove the override in the media query.
@media screen and (max-width: 600px){
   #nurseLinks {display: block; width: 100%;}
   #nurseImg {width: 283px; }
}

Open in new window

0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Put the image in it's own div.  For large screen float the nurse image to the left and make the width the proper width to fit the div with other images.  Then for small screen, float:none and text-align:center.

<div nurse image >
  <img src=nurse>
</div>
<div small images>
     <img src=img1>
     <img src=img2>
     <img src=img3>
     <img src=img4>
     <img src=img5>
     <img src=img6>
 
</div>

Open in new window

0
 
weikelbobAuthor Commented:
That did it, thanks!
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.