HTML/CSS - Mobile friendly and resizing easily

Question

My classmates and I are trying to figure how to make this code be completely mobile friendly. We tried using @media screen but it did not work. We want to make this happen with HTML and CSS.

HTML

    <!--List Content Start-->
    <div class="listcontent">
    <div class="listnumber">1</div>
    <div class="listtitle">This div tag emphasizes the title.</div>
    <div class="listpic"></div>
    </div>
    <br><br>
    <!-- List Content End-->

    <div class="listcontent">
    <div class="listnumber">2</div>
    <div class="listtitle">This div tag emphasizes the title.</div>
    <div class="listpic"></div>
    </div>

</div>

CSS

.listcontainer {
    width: 100%;
    height: 100%;
}

.listcontent {
    width: 500px;
    height: 400px;
    margin: auto;
    background-color: #F5EFEF;
    padding:5px;
}

.listnumber {
    width: 50px;
    height: 50px;
    float: left;
    background-color: #B33638;
    padding: 5px;
    color: white;
    font-size: 45px;
    text-align: center;
}

.listtitle {
    width: 425px;
    height: 50px;
    padding: 5px;
    float: right;
    background-color: #fff;
}

.listpic {
    width: 100%;
    height: 335px;
    margin-top: 65px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 1

Here is the fix I created for you in terms of your coding snippet: JSFiddle

.listcontainer {
  width: 100%;
  height: 100%;
}

.listcontent:first-child {
  margin-bottom: 40px;
}

.listcontent {
  max-width: 500px;
  min-width: 320px;
  width: 100%;
  height: 400px;
  margin: auto;
  background-color: #F5EFEF;
  padding: 0;
}

.titlewrapper {
  width: 100%;
}

.listnumber, .listtitle {
  display: inline-block;
}

.listnumber {
  width: 50px;
  height: 50px;
  background-color: #B33638;
  padding: 5px;
  color: white;
  font-size: 45px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.listtitle {
  height: 50px;
  line-height: 50px;
  padding: 5px;
  background-color: #fff;
  white-space: nowrap;
  width: calc(100% - 70px);
  max-width: 100%;
}

.listpic {
  width: 100%;
  height: 335px;
  margin-top: 65px;
}

<div>
  <!--List Content Start-->
  <div class="listcontent">
    <div class="titlewrapper">
      <div class="listnumber">1</div>
      <div class="listtitle">
        This div tag emphasizes the title.
      </div>
    </div>
    <div style="clear:both;" />
    <div class="listpic"></div>
  </div>
  <!-- List Content End-->

  <div class="listcontent">
    <div class="titlewrapper">
      <div class="listnumber">2</div>
      <div class="listtitle">
        This div tag emphasizes the title.
      </div>
    </div>
    <div style="clear:both;" />
    <div class="listpic"></div>
  </div>
</div>

Ok so let's dive in, what are the reason for all these CSS and HTML changes?

1. To make something mobile responsive you need to consider the behavior it needs to have. When it comes to element widths, a general rule of thumb is the following.

CSS code example:

.some-wrapper-element {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
}

This makes a wrapping element, such as your .listcontent to become responsive with and without media queries being used. Note how I applied this throughout the CSS to give elements which needed to resize as the page resized, a dynamic width.

2. Your HTML layout needed a little more thought behind it. You are trying to horizontally align two elements and make them responsive. I will admit this is not a straight forward and easy to implement solution, but there are standard things to look at:

   • A wrapping element to ensure horizontal alignment occurs.
   • A CSS rule to keep the elements in line, such as display: inline-block or float: left, or a combination... the implementation depends on what works for you.
   • The elements to be horizontally aligned and made responsive, need to fit next to each other. This is important and it is the reason for all the added CSS code. See a very good reference here: How to place two divs side by side where one sized to fit and other takes up remaining space?

3. Media queries..., my rule of thumb is: does x element need to change responsively in a way which cannot be done with CSS styling first? Such as hiding/showing an image on certain screen widths, then your answer is yes please. Otherwise think of our layout first, how to make it responsive first and last how to use media queries for the things you cannot make responsive.

4. The <div style="clear:both;" /> code that was put there. That exists only to help separate your title section from your image section. It is another layout sugar I put there for you, because it will help keep things in place and separate content that does not need to be mixed. Awesome right!

5. line-height: 55px; This is simple: if you have text inside a small element (like the one you have) and you want it to look well, center it using line-height that is equal to the element's height. I did this just because I thought it looks nice, but change it if you think it is unnecessary.

Anyways, I hope this helps let me know if you have any questions.

Answer 2

The listcontainer should have the fixed width, while the listcontent fill them by 100%. All you have to do then is just fill the media querys like this:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {
.listcontainer {
    width: 100%;
    height: 100%;
}
}

This way the site will have a fixed width for desktop usage, once the browser is too small to display the entire page (in this case 1024px but that depends on the page - in your example probably 500px) it will go to 100% dynamically, which is the most common approach. I can't tell you all of the media querys, since it depends on the developer to decide what the bevahiour should look like.

If you want to have a really mobile friendly site I recommend you using a framework like bootstrap - it does most of the job for you and you'll learn exactly how media querys are working and how you are supposed to use them properly.