CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Sen123
Sen123

Reputation: 97

Responsive css two columns cancel float left

I am trying to build a simple responsive two columns template, and the two paragraphs are suppose to stack one another when the width being reduced to 1000px. However, I realized that two paragraphs have been pushed to the left and only have 50% of the width just before the screen size being reduced down to 1000px, then after the screen size reached to 1000px, the two paragraphs behaves normally, but what happened in between? how do I solved it.

Codepen Link

*,
body {
  padding: 0;
  margin: 0;
}

body {
  width: 95%;
  margin: 0 auto;
}

header {
  width: 100%;
  height: 3em;
  color: #00;
  font-family: sans-serif;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, .3)
}

header p {
  font-size: 1.25em;
  font-weight: 700;
  color: #FFF;
  font-family: sans-serif;
  margin-left: 10px;
  text-transform: uppercase;
}

header nav {
  list-style: none;
  margin-right: 10px;
  ;
}

header nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  padding: 10px;
  font-weight: 400;
  text-transform: uppercase;
}

header nav a:hover {
  color: blue;
  text-decoration: underline;
}

main section {
  float: left;
  width: 48%;
  margin: 5px 10px;
  text-align: justify;
}

.clear {
  clear: both;
}

footer {
  width: 100%;
  background: #eeeeee;
  text-align: center;
  margin-top: 10px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: deeppink;
}

@media (max-width:1000px) {
  main section {
    width: 100% !important;
    float: none !important;
  }
  main section p {
    width: 100%;
    min-width: 100%;
  }
}
<body>
  <header>
    <p>Logo</p>
    <nav> <a href="#">Home</a> <a href="#">Contacts</a> <a href="#">Locations</a> </nav>
  </header>
  <main>
    <section>
      <p>Biltong bresaola salami rump, ground round tongue turkey meatloaf jowl. Tail andouille doner, hamburger shoulder short ribs ham hock alcatra strip steak turducken pancetta cupim leberkas. Landjaeger venison kevin ham hock capicola, jerky ribeye
        rump burgdoggen tenderloin pork. Picanha rump biltong pastrami, cupim corned beef prosciutto salami.</p>
    </section>
    <section>
      <p>Sausage fatback cow, venison bacon shoulder boudin strip steak short loin burgdoggen picanha. Pig cow brisket pork chop. Turducken kevin ground round, beef frankfurter biltong turkey tongue pig ham hock alcatra. Pork t-bone rump venison chuck filet
        mignon pork belly. Cow pork chop alcatra capicola sausage, landjaeger turkey beef pancetta. Buffalo doner pork loin, pork chop frankfurter t-bone shankle leberkas cupim sirloin tenderloin filet mignon strip steak corned beef.</p>
    </section>
  </main>
  <div class="clear"></div>
  <footer> Design & create artwork &copy;copyright 2018 </footer>
</body>

Upvotes: 0

Views: 72

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

The problem is that you are giving margin in px but your width is in %...so try to use margin left and right in % like

main section {
  float:left;
  margin: 5px 1%;
  width: 48%;
  text-align: justify;
  box-sizing: border-box;
}

Or another solution will be which I recommend use padding instead of margin and apply width:50% to the main section

main section {
  float:left;
  width: 50%;
  text-align: justify;
  padding: 5px 10px;
  box-sizing: border-box;
}

Updated Codepen

Upvotes: 2

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

you need to change margin: 5px 1%;

main section{
  float:left;
  width:48%;
  margin: 5px 1%;
  text-align:justify;
}

for width:100% in some screen, margin 10px is more then 1% so

Upvotes: 1

Related Questions