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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
weikelbobAuthor Commented:
Perfect!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.