Responsive HTML, CSS - getting to look right on mobile and cleaning up code

Hello,

page: www.idiaper.com

I am serving something different to under 600px. Everything is working right now but the code is very bloated with a lot of unnecessary items. I'm going to first attach the code that is working that I'm using, then attach some code that Slick812 gave me that is a partial solution to the bloated code that you can use to complete the clean code. Hoping Slick812 can step in, anyone else is free to help.

Thanks.

My CSS and html:

#smallhomemenu
{
height:0px;
overflow:auto;
}

#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:0px;
max-width:100%;
}

.bottom
{
margin-top:-5px;
max-width:100%;
background-color:#3babdd;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
}

.holder-buttons-home div {
	width: 16.666666%;
	height:auto;
	background-color:#3babdd;
}

.holder-buttons-home div img {
	width:100%;
	max-height:133px;
}


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

#bighomemenu
{
height:0px;
overflow:hidden;
}

#smallhomemenu
{
max-width:100%;
height:auto;
}

.holder-buttons-home div 
{
width:33.333%;
background-color:#3babdd;
}


}

Open in new window


<div id="bighomemenu">

  <div id="home-menu" style="text-align:center;background-color:#3babdd;"> 
    <div class="top"> <img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top2.gif" style="width: 100%;" /> </div>
    <div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd;display: table;"> <br />
       
      <div class="top-4-guides" style="float:left"> <a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides2.gif" /></a> </div> 
      <div class="shop-by-category" style="float:left"> <a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category2.gif" /></a> </div> 
      <div class="8-minute-video" style="float:left"> <a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video2.gif" /></a> </div> 
      <div class="best-6-adult-diapers" style="float:left"> <a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers2.gif" /></a> </div> 
      <div class="faq" style="float:left"> <a href="#faq"><img alt="faq" src="/assets/images/faq2.gif" /></a> </div> 
      <div class="glossary" style="float:left"> <a href="#glossary"><img alt="glossary button" src="/assets/images/glossary2.gif" /></a> </div> </div> <br />
     
    <div class="bottom" style="float:left;width:100%;height:auto"> <img alt="bottom of menu with testimonial" src="/assets/images/bottom2.gif" style="width: 100%;"> </div></div>
    
    </div>
    <div id="smallhomemenu">
    
  <div id="home-menu" style="text-align:center;background-color:#3babdd;"> 
    <div class="top"> <img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top-mobile.gif" style="width: 100%;" /> </div>
    <div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd;display: table;"> <br />
       
      <div class="top-4-guides" style="float:left"> <a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides-mobile.gif" /></a> </div> 
      <div class="shop-by-category" style="float:left"> <a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category-mobile.gif" /></a> </div> 
      <div class="8-minute-video" style="float:left"> <a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video-mobile.gif" /></a> </div>
      <br> 
      <div class="best-6-adult-diapers" style="float:left"> <a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers-mobile.gif" /></a> </div> 
      <div class="faq" style="float:left"> <a href="#faq"><img alt="faq" src="/assets/images/faq-mobile.gif" /></a> </div> 
      <div class="glossary" style="float:left"> <a href="#glossary"><img alt="glossary button" src="/assets/images/glossary-mobile.gif" /></a> </div> </div> <br />
     
    <div class="bottom" style="float:left;width:100%;height:auto"> <img alt="bottom of menu with testimonial" src="/assets/images/bottom-mobile3.gif" style="width: 100%;"> </div></div>
    
    </div>    

Open in new window


Slick's solution which is just for the non-mobile part and needs to be expanded. It's also using some old images that I changed in the my code. Note how clean it is:

<style>
#homeHeader {
text-align:center;
background-color:#3babdd;
}

.holder-buttons-home img{
width:16.666%;
border:0;
}

.holder-buttons-home a{
border:0;
margin:0;
vertical-align:center;
}

#btmImg {
width: 100%;
position:relative;
top:-5px;
}
</style>

Open in new window


<div id="homeHeader">
<div id="home-menu">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="http://www.idiaper.com/assets/images/top2.gif" style="width: 100%;">
	<div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd">
				<br>
		<a href="#top-4-guides"><img alt="top 4 guides button" src="http://www.idiaper.com/assets/images/top-4-guides.gif"></a><a 
		href="#shop-categories"><img alt="shop-by-category button" src="http://www.idiaper.com/assets/images/shop-by-category.gif"></a><a 
		href="#8-minute-video"><img alt="8-minute-video button" src="http://www.idiaper.com/assets/images/8-minute-video.gif"></a><a 
		href="#best-6"><img alt="best-6-adult-diapers button" src="http://www.idiaper.com/assets/images/best-6-adult-diapers.gif"></a><a 
		href="#faq"><img alt="faq" src="http://www.idiaper.com/assets/images/faq.gif"></a><a 
		href="#glossary"><img alt="glossary button" src="http://www.idiaper.com/assets/images/glossary.gif"></a>
	</div>
	<img id="btmImg" alt="bottom of menu with testimonial" src="http://www.idiaper.com/assets/images/bottom.gif">
	</div>

</div>

Open in new window

LVL 7
weikelbobAsked:
Who is Participating?
 
Slick812Commented:
OK, , Here is my attempt for the Image Links for your products, There is nothing about this display that looks like a menu to me so I ID the main container as   id="imageLinks"

and the link icons container as id="iconDiv"

code as -
<style>
#imgLinks {
text-align:center;
background-color:#3babdd;
}

#iconDiv {
padding-top: 0.8em;
}

#iconDiv img{
width:16.666%;
border:0;
}

#iconDiv a{
border:0;
margin:0;
vertical-align:center;
}

#bigTop, #smallTop, #bigBttm, #smallBttm {
width: 100%;
}

#smallTop, #smallBttm {
display:none;
}

#bigBttm, #smallBttm {
margin-top: -5px;
}

@media screen and (max-width: 600px){
  #bigTop {display: none;}
  #smallTop {display: initial;}
  #bigBttm {display: none;}
  #smallBttm {display: initial;}
  #iconDiv img {width: 33.33%;}
}
</style>


<div id="imgLinks">
<img id="bigTop" alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="http://www.idiaper.com/assets/images/top2.gif" style="width: 100%;" />
<img id="smallTop" alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="http://www.idiaper.com/assets/images/top-mobile.gif"/>
<div id="iconDiv">
  <a href="#top-4-guides"><img alt="top 4 guides button" src="http://www.idiaper.com/assets/images/top-4-guides.gif"></a><a 
  href="#shop-categories"><img alt="shop-by-category button" src="http://www.idiaper.com/assets/images/shop-by-category.gif"></a><a 
  href="#8-minute-video"><img alt="8-minute-video button" src="http://www.idiaper.com/assets/images/8-minute-video.gif"></a><a 
  href="#best-6"><img alt="best-6-adult-diapers button" src="http://www.idiaper.com/assets/images/best-6-adult-diapers.gif"></a><a 
  href="#faq"><img alt="faq" src="http://www.idiaper.com/assets/images/faq.gif"></a><a 
  href="#glossary"><img alt="glossary button" src="http://www.idiaper.com/assets/images/glossary.gif"></a>
</div>
<img id="bigBttm" alt="bottom of menu with testimonial" src="http://www.idiaper.com/assets/images/bottom.gif">
<img id="smallBttm" alt="bottom of menu with testimonial" src="http://www.idiaper.com/assets/images/bottom-mobile3.gif">
</div>

Open in new window

0
 
David KellyWeb developerCommented:
I'm not sure I understand the question?

Is this just a request for someone to reformat your HTML/CSS?
0
 
Slick812Commented:
OK I looked again at your site page, and resized the width, and at some smaller width, the top and bottom images are changed, and the touch icons go from one row of 6, , ,  to two rows of 3 icons.

so in a CSS  screen media width break point, the top and bottom images are changed, as with the icon widths, would you know where in your CSS you have the lines that do theses changes?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
weikelbobAuthor Commented:
@Dave Kelly

Yes

@Slick812

Do you mean:

#smallhomemenu
{
height:0px;
overflow:auto;
}

followed by

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

#bighomemenu
{
height:0px;
overflow:hidden;
}

#smallhomemenu
{
max-width:100%;
height:auto;
}
}

Open in new window


If not, let me know what you mean.
0
 
Slick812Commented:
Yes, that is it, thanks, This is not what I expected, I will take some time to look at the  #smallhomemenu structure and css, to see what can be done?

I will add here, in the old CSS you had things like -
     width: 100%;
     float: left;

which to me is useless CSS, if something is 100% width, then it is imposible to have anything "Float" around it, or as you use it in your code for horizontal element stacking, if it is 100% wide, then you can not have ANY horizontal stacking, as it can only be that element on one line anyway.

Also to place a block <div> around the <a><img> and then make the <div> a "float: left;", is also useless code, as the <a><img> are "inline" elements and will automatically horizontal stack, as side by side elements, without doing any CSS to them at all.

looking at the page
0
 
weikelbobAuthor Commented:
Perfect!
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.