CODEWITHSUNDEEP
htmlcssresponsive-design
hazrmard
hazrmard

Reputation: 3661

How to size divs so they don't appear too small on mobile devices?

I am designing a page for a blog. The page has a fixed position sidebar, and a centered div for content. You can see it here. Here's my CSS:

.container {
  width: 100%;
  height: 100%;
  text-align: center;
}
.sidebar {
  position: fixed;
  left: 0px;
  top: 10%;
  height: 80vh;
  width: 10%;
  background-color: red;
}
.content {
  width: 40%;
  display: inline-block;
  text-align: justify;
}
<body>
  <div class="container">

    <div class="sidebar">
      THis is the sidebar.
    </div>

    <div class="content">
      <h1>Fourth</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna
        sed consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
        urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>

      <p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
        lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>

      <p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
        ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
        malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar
        in sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
        magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
        tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>

      <p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
        justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
        non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>

    </div>
  </div>
  <br/>
  <p><em>This is the footer</em>
  </p>
</body>

Currently all widths are as percentages. I do not want the content to span the whole width of the page (for easier reading). However on mobile devices (or when the screen width is small enough) I want the content to span the page. However with % widths, the content width constantly changes with the page width. It is ok on a computer screen but for smaller widths the content div becomes too narrow.

An example would be the website medium. You can see (as you resize the window) that for larger widths, the content width remains the same, but for smaller widths the content starts to span the whole page.

Any idea how to achieve that?

Upvotes: 2

Views: 80

Answers (2)

dippas
dippas

Reputation: 60543

you can set a min-width in your .content with any value you may like, just remember you have a fixed sidebar

.container {
  width: 100%;
  height: 100%;
  text-align: center;

}
.sidebar {
  position: fixed;
  left: 0px;
  top: 10%;
  height: 80vh;
  width: 10%;
  background-color: red;
}
.content {
  width: 40%;
  display: inline-block;
  text-align: justify;
  min-width: 260px
}
<div class="container">

  <div class="sidebar">
    THis is the sidebar.
  </div>

  <div class="content">
    <h1>Fourth</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna sed
      consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
      urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>

    <p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
      lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>

    <p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
      ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
      malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar in
      sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
      magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
      tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>

    <p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
      justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
      non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>

  </div>
</div>
<br/>
<p><em>This is the footer</em>
</p>

Upvotes: 4

Math
Math

Reputation: 676

You can use CSS special selectors: example:

@media screen and (max-width: 480px) {
   .content {
      width: 80%;
   }
}

So that the .content will be set to 80% width on small screens. You may also want to change the sidebar behavior for small resolutions, like setting up his position to initial and expanding his width to the same width as your content, so the design stay coherent.

Here's a fiddle (You need to resize the render frame by click and drag to see it in action ) https://jsfiddle.net/9c3ztska/1/

Now i will introduce to you something very usefull when designing responsive website:

It's a framework called Skel. Long story short, it uses a grid system, wich let you specify specific size for a div for specific resolutions.

The grid system works with 12 units in width, so 12u represent 100% of the container width.

Here's a code example:

<div class="row">
   <div class="6u 12u(small)"> YOUR CONTENT </div>
</div>

What it means: Your content will be 50% of the container width on large screen, but will expand to 100% on small screens.

If you want to try it out and get fast in it, i recommend you to try baseline wich is a boilerplate using Skel framework. You can download it and put it on your server (no db needed) and start coding. baseline comes with pre-configured Skel and "breakpoints" (breakpoints are screen resolutions for wich Skel will swicth between CSS rules)

Upvotes: 2

Related Questions