Why is my page not 100% responsive?

Question

I'm learning to code by simply being thrown into different projects and I'm stuck on my page. I have been working on making this page responsive for a few days and I can not get it working. Is it my images that are not responsive? Or is it the containers they are in? I can't figure it out.

window.onload=function(){
$("div[id^=Template]").click(function() {
  var id = $(this).attr('id');
     var theContent = $('#contents').find('.' + id);
  $('#contents').children().hide();
     theContent.show();
     $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});

}

    .cell1 {
  text-align: center;
  width: 400px;
}
.cell2 {
  padding: 10px 20px 10px 20px;
  text-align: center;
  width: 100%;
}
.Column {
  vertical-align: top;
  width: 500px;
  display: inline-block;
}
.img1 {
 padding: 20px 0 2px 0;
}
.img2 {
 padding: 20px 0 0 0; 
 }
.img3 {
 padding: 20px 0 46px 0;
 }
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 260px;
  float: center;
  color: #FFF;
  cursor: pointer;
}
.Template0 {
  display: block;
  clear: both;
  width: 100%;
}
.Template1,
.Template2,
.Template3 {
  display: none;
  clear: both;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  .mobile {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    padding: 10px 0 10px 0 !important;
  }
  .mobile-img {
    display: block !important;
    Width: 100% !important;
    align: center !important;
 padding: 0px 0px 0px 0px !important;
  }
  .mobile-column {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
  .mobile-cell1 {
  display: block !important;
  width: 100% !important;
}
.mobile-cell2 {
  display: block !important;
  width: 100% !important;
}

    <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <div align="center">
        <div align="center" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#000000; line-height:24px; padding-top:15px; padding-bottom:25px;">Mailing Templates</div>
        <div class="Column mobile-column">
        <div class="cell1 mobile-cell1"><img width="400" border="0" height="356" spname="col1-2.jpg" name="col1-2.jpg" contentid="12195208" xt="SPIMAGE" alt="Template 1" class="img1 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/col1-2.jpg" /></div>
        <div id="Template1" class="cell2 mobile">Template 1</div>
        </div>
        <div class="Column mobile-column">
        <div class="cell1 mobile-cell1"><img width="400" border="0" height="358" spname="6pack-1.jpg" name="6pack-1.jpg" contentid="12192292" xt="SPIMAGE" alt="Template 2" class="img2 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/6pack-1.jpg" /></div>
        <div id="Template2" class="cell2 mobile">Template 2</div>
        </div>
        <div class="Column mobile-column">

        <div class="cell1 mobile-cell1"><img width="400" border="0" height="312" spname="hero-1col.jpg" name="hero-1col.jpg" contentid="12195206" xt="SPIMAGE" alt="Template 3" class="img3 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 3" src="http://contentz.mkt51.net/lp/10613/575195/hero-1col.jpg" /></div>
        <div id="Template3" class="cell2 mobile">Template 3</div>
        </div>
        </div>
        <div align="center" id="contents">
        <div align="center" id="content0" class="Template0" style="padding-top:50px; padding-bottom:50px;"><img width="400" border="0" height="161.29" spname="choose-a-template4_0.jpg" name="choose-a-template4_0.jpg" contentid="12205657" xt="SPIMAGE" alt="Choose a template" class="mobile-img" id="IMCvendors-Keena22.jpg" title="Choose a template" src="http://contentz.mkt51.net/lp/10613/575195/choose-a-template4_0.jpg" /></div>
        <div align="center" id="content1" class="Template1" style="padding-top:50px; padding-bottom:50px;">sample demo txt T1</div>
        <div align="center" id="content2" class="Template2" style="padding-top:50px; padding-bottom:50px;">sample demo txt T2</div>
        <div align="center" id="content3" class="Template3" style="padding-top:50px; padding-bottom:50px;">sample demo txt T3</div>
        </div>
</body>

When making responsive web pages you should avoid using measures in px, but you should use percentage or em. In this way, all your elements will be more responsive (or at least this is what I've learn in making websites) — silviagreen, Feb 15 '16 at 15:29

score 0 · Accepted Answer · answered Feb 15 '16 at 15:38

Try not to give fixed size in pixels: remove width and height attributes from img tags and put in css width: 100%. In this way, all images will be responsive. Also use percentage to define width.

window.onload=function(){
$("div[id^=Template]").click(function() {
  var id = $(this).attr('id');
     var theContent = $('#contents').find('.' + id);
  $('#contents').children().hide();
     theContent.show();
     $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});

}

.cell1 {
  text-align: center;
  width: 400px;
}
.cell2 {
  padding: 10px 20px 10px 20px;
  text-align: center;
  width: 100%;
}
.Column {
  vertical-align: top;
  width: 500px;
  display: inline-block;
}
.img1 {
 padding: 20px 0 2px 0;
    width: 100%; /*USE PERCENTAGE*/
}
.img2 {
 padding: 20px 0 0 0; 
  width: 100%; /*USE PERCENTAGE*/
 }
.img3 {
 padding: 20px 0 46px 0;
  width: 100%; /*USE PERCENTAGE*/
 }
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 50%; /*USE PERCENTAGE*/
  float: center;
  color: #FFF;
  cursor: pointer;
}
.Template0 {
  display: block;
  clear: both;
  width: 100%;
}
.Template1,
.Template2,
.Template3 {
  display: none;
  clear: both;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  .mobile {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    padding: 10px 0 10px 0 !important;
  }
  .mobile-img {
    display: block !important;
    Width: 100% !important;
    align: center !important;
 padding: 0px 0px 0px 0px !important;
  }
  .mobile-column {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
  .mobile-cell1 {
  display: block !important;
  width: 100% !important;
}
.mobile-cell2 {
  display: block !important;
  width: 100% !important;
}

<body>
  <!-- DO NOT FIX WIDTH AND HEIGHT ATTRIBUTE in img tag, use css instead -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <div align="center">
        <div align="center" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#000000; line-height:24px; padding-top:15px; padding-bottom:25px;">Mailing Templates</div>
        <div class="Column mobile-column">
        <div class="cell1 mobile-cell1"><img border="0" spname="col1-2.jpg" name="col1-2.jpg" contentid="12195208" xt="SPIMAGE" alt="Template 1" class="img1 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/col1-2.jpg" /></div>
        <div id="Template1" class="cell2 mobile">Template 1</div>
        </div>
        <div class="Column mobile-column">
        <div class="cell1 mobile-cell1"><img border="0" spname="6pack-1.jpg" name="6pack-1.jpg" contentid="12192292" xt="SPIMAGE" alt="Template 2" class="img2 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/6pack-1.jpg" /></div>
        <div id="Template2" class="cell2 mobile">Template 2</div>
        </div>
        <div class="Column mobile-column">

        <div class="cell1 mobile-cell1"><img border="0" spname="hero-1col.jpg" name="hero-1col.jpg" contentid="12195206" xt="SPIMAGE" alt="Template 3" class="img3 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 3" src="http://contentz.mkt51.net/lp/10613/575195/hero-1col.jpg" /></div>
        <div id="Template3" class="cell2 mobile">Template 3</div>
        </div>
        </div>
        <div align="center" id="contents">
        <div align="center" id="content0" class="Template0" style="padding-top:50px; padding-bottom:50px;"><img width="400" border="0" height="161.29" spname="choose-a-template4_0.jpg" name="choose-a-template4_0.jpg" contentid="12205657" xt="SPIMAGE" alt="Choose a template" class="mobile-img" id="IMCvendors-Keena22.jpg" title="Choose a template" src="http://contentz.mkt51.net/lp/10613/575195/choose-a-template4_0.jpg" /></div>
        <div align="center" id="content1" class="Template1" style="padding-top:50px; padding-bottom:50px;">sample demo txt T1</div>
        <div align="center" id="content2" class="Template2" style="padding-top:50px; padding-bottom:50px;">sample demo txt T2</div>
        <div align="center" id="content3" class="Template3" style="padding-top:50px; padding-bottom:50px;">sample demo txt T3</div>
        </div>
</body>

After removing the fixed sizes from all the images the images are 100% responsive, and I changed the CSS style column from 500px to 33% but now my image containers are overlapping when sizing down the window or opening on a mobile device. Is my media query not working? Because I set it to display as a block and stack on top of each other when opened on mobile. — cgrouge, Feb 15 '16 at 16:08
@cgrouge remove width: 400px from .cell1 and it should get better. You can use jsfiddle to see what happen. — silviagreen, Feb 15 '16 at 16:17
This has helped a lot! The containers are no longer overlapping and images are fully responsive. Now my issue is opening on a mobile browser. On my web browser I can shrink the window down and it works just fine. But when opening in a mobile browser, it does not stack. Is there an issue with my media query? It's as if it's not working when opening on mobile. @silviagreen — cgrouge, Feb 15 '16 at 17:30
I've tested in google chrome and firebox on desktop and safari on mobile. It's interesting, I changed to media query to read :@media only screen and (max-device-width: 480px) which fixed the issue on mobile but now the responsiveness on desktop is no longer there. — cgrouge, Feb 15 '16 at 18:46
You can see it in the fiddle here: https://jsfiddle.net/v8jdnpyc/ and here is what it looks like on mobile: http://i.imgur.com/z4cQmZc.png — cgrouge, Feb 15 '16 at 19:07
Right now I am using iPad so I cannot verify how the jsfiddle is on desktop, however I cannot see a closing } for the media query, maybe this can be part of the problem — silviagreen, Feb 15 '16 at 20:11
Wow... that was it! Great catch. Thank you! It works beautifully now. — cgrouge, Feb 15 '16 at 20:27

Why is my page not 100% responsive?

1 Answers1