Responsive html, css - mobile, tablet, desktop all sizes

Trying to get this to look good on all devices. Please help.

Page: http://www.idiaper.com/depends-diapers

It's just the top blue box with the ask-a-nurse image in it. It looks bad when I resize the screen and also on tablet and mobile.

Need the font to be big all the time. We are dealing with older people:

Sometimes text-align:center has to be inline with our cart, btw.

Looking for html and css to copy and paste in, and if you want to explain your code so I can learn that would be great.

<div id="category11">
	<div id="ask-a-nurse-cat">
	<a href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img class="responsive-left" 				    	src="/assets/images/ask-a-nurse-cat2.gif">
	</a>
	</div>
	<div id="cat-top-right">
	  <h1 style="font-size:120%">Depends Diapers for Adults at iDiaper.com </h1>
	Below are Depends Diapers for men and women. There's some unique items in these 				categories like the Depend Adjustable Underwear (heavy) that's a pull up but it has tabs 	on the side for adjustment as well. 
	</div>
</div>

Open in new window


#category11
{background-color:#3690cf;
padding:5px 5px;
}

#category11 h1
{
color:#fff;
font-size:20px;
}

#category11 p
{
color:#fff;
}

#category11 p a, #category11 p a.visited
{
color:#0d3d5f;
text-decoration:underline;
}

#ask-a-nurse-cat
{
display: inline-block;
width:18.289%;
height:auto;
}
#ask-a-nurse-cat img
{
display: inline-block;
width:100%;
height:auto;
}
#cat-top-right
{
width:81.7%
height:auto;
text-align:left;
display: inline-block;
vertical-align:top;
padding-left:2%;
}


@media screen and (max-width: 600px){
#ask-a-nurse-cat
{
display:block;
max-width:171px;
padding-right:10px;
padding-bottom:10px;
}


#category11
{
font-weight:normal;
}

Open in new window

LVL 7
weikelbobAsked:
Who is Participating?
 
Slick812Connect With a Mentor Commented:
OK , I looked at the image, and went to the web site again, and looked at the blue nurse segment in the browser "Inspect Element" .
I take it you did not try my Less complex code that I gave before? ?
I do not see any advantage to have the Image and it's containers, change width and be responsive with width of device, the Image is not that big, so In my code I did not have it change width at all. An old and useful added property for TEXT to flow around an Image is the "Float Left or Right", so in my code I do NOT have a <div> container around the <a><img> elements, instead I just set the <a> to have a CSS of   float: left;
That way I do NOT need any "inline-block" or set any CSS for widths as a percent. The Text will automatically "Flow" around the <a><img> just as you need. I added a CSS    margin-right: 5px;    to the <a> so the TEXT will have a space of 5px away from the Image and the <div> with ID  nurseDepend   has a padding of  5px, so the TEXT should be seen with somewhat the same blue space on left and right depending on where the text whole word line breaks occur.

If you need to adjust the top and bottom blue space, then just change the top or bottom CSS padding. All of these things are not advanced or complex CSS properties, these are some of the really fundamental things you should already know about CSS. Since you are a web site developer, you should take an online course to begin to learn CSS and how to use it in your site, it will be worth the time and effort.

The element structure and CSS in your
    <div id="category11">
for this is not what you need to do this, especially the -
     <img class="responsive-left" src="/assets/images/ask-a-nurse-cat2.gif">
the use of   class="responsive-left"   really is incorrect for the outer element structure and CSS you have in the rest of this thing.
0
 
Slick812Commented:
greetings weikelbob, , , I looked at your page, and resized the width of my browser, OUCH, , that display for the blue "Nurse Depends Diapers" is All Over The Place, not good.

However, I can not really see what you are trying to get as a display result? ?, You seemed to have Copied the CSS for a Display with 6 images in it that was responsive. BUT I do not understand Why you copied that <div> <a> <img> structure and CSS, since this does not have 6 images in it? ? This is a different width set up, with just an image and a Text block, I guess you just want the, text on the right to float around the image on the left? ?
0
 
Slick812Commented:
Not sure about what you are trying to do since your display for that page is vary mixed up in the sizing? ?

But you can try this code, I have renamed the ID to things that make sense to me -

<style>

#nurseDepend {
background-color:#3690cf;
padding:5px;
text-align: center;
}

#nurseDepend a{
float: left;
margin-right: 5px;
}

#nurseText {
font-size:110%;
}

#nurseText h1{
color: white;
font-size:123%;
}

.clearB {
clear: both;
}

@media screen and (max-width: 483px){
  #nurseDepend a{
  float: none;
  }
}
</style>

Open in new window


html -

<div id="nurseDepend">
	<a href="www.idiaper.com/depends-diapers/Ask-A-Nurse_ep_29.html">
    <img src="http://www.idiaper.com/assets/images/ask-a-nurse-cat2.gif">
	</a>
	<div id="nurseText">
	  <h1>Depends Diapers for Adults at iDiaper.com </h1>
	Below are Depends Diapers for men and women. There's some unique items in these categories like the Depend Adjustable Underwear (heavy) that's a pull up but it has tabs 	on the side for adjustment as well. 
	</div>
    <div class="clearB"></div>
</div>

Open in new window


I just guessed at the Font Sizes in the h1 and the right text, you can make them bigger?
0
 
weikelbobAuthor Commented:
Hi Slick812,

This time what I'm actually wanting on desktop I've attached the image of. Only difference is I want the words to have equal spacing on the right as they do on the left, and for there to be an equal amount of blue below and above the nurse image unless there are too many words, then it expands with words below the nurse image. I've indicated them in the picture.

For mobile (below 600px) I'd like it to look similar but the nurse image needs to be 135px wide.

Could you help me out?
full-desktop2.png
0
 
weikelbobAuthor Commented:
Thanks Slick812,

I realized in reading your response that this was just a regular image float left in a div. I was making it far too complicated. It was easy. Thanks for your help.

Bob
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.