simple responsive CSS/HTML - centering an image on mobile

weikelbob
weikelbob used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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

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

Author

Commented:
That did it, thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial