Problems with responsive image 3 column layout

Question

I am a student and working on a school project. I'm working on a responsive grid with 3 columns whenever u resize the widow the image should stay at 100% and only be visible once.

I came into an error with it, when full screen it takes up the full width but when i resize the widow the section overlay each other and only come back to full width (like they are supposed to be at phone size, mediaquery)

code snippet:

.container {
    width:100%;
    height:700px;
}
.columns {
    float:left;
    width:33.33%;
    height:100vh;
}
.blue {
    background-color: #92d2fc;
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800);
}
.yellow {
    background-color: #fad74e;
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800);
}
.red {
    background-color: #f88888;
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800);
}
.blue img, .red img, .yellow img {
    width:100%;
}

@media screen and (max-width: 700px){
    .columns {
    width:100%;
    }
}

<div class="container">
    
<section class="columns blue">
<h3>About us</h3>
<p class="margin-top">How the gym became a reality</p> 
</section>    

<section class="columns yellow">
<h3>Manifesto</h3>
<p class="margin-top">Respect the rules</p> 
</section>           
    
<section class="columns red">
<h3>Contact us</h3>
<p class="margin-top">Have a chat with us</p> 
</section>      
    
</div>

Thanks in advance! Distortion

Answer 1

I'm not sure I 100% understand your question, but it sounds like your problem is the fixed-width of the background image? Try something like background-size: contain; in your .columns class, or giving the background-size some percentage values.

Answer 2

If I'm correct, this is what you are after. I make benefit of the 100vw and 100vh values.

vh 1/100th of the height of the viewport.
vw 1/100th of the width of the viewport.

Read more about length at MDN.

Together with the display: flex; property (MDN reference) it comes in handy to get the whole space filled out.

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Also, I started mobile first, so that the min-width is set to 700px, instead of the other way around. In that way you can scale easily to any size you want. You can also use calc(value) function to get 1/3th of the width of your screen width (MDN reference). In that case, replace the width: 33.3%; with width: calc(100% / 3);

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

.wrapper {
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}

.columns {
  width: 100%;
}

.blue {
  background-color: #92d2fc;
}

.yellow {
  background-color: #fad74e;
}

.red {
  background-color: #f88888;
}

@media screen and (min-width: 700px) {

  .container {
    width: 100%;
    height: 100%;
    flex-flow: column wrap;
  }

  .columns {
    height: 100%;
    width: 33.3%;
  }
}

<div class="wrapper">

  <div class="container">

    <section class="columns blue">
      <h3>About us</h3>
      <p class="margin-top">How the gym became a reality</p>
    </section>

    <section class="columns yellow">
      <h3>Manifesto</h3>
      <p class="margin-top">Respect the rules</p>
    </section>

    <section class="columns red">
      <h3>Contact us</h3>
      <p class="margin-top">Have a chat with us</p>
    </section>

  </div>
</div>

Answer 3

I upadated your media query and added a class="clearfix" to your container

.container {
    width:100%;
    height:700px;
}
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }

.columns {
    float:left;
    width:33.33%;
    height:100vh;
}
@media screen and (min-width: 700px){
.blue {
    background-color: #92d2fc;
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg);
}
.yellow {
    background-color: #fad74e;
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg);
}
.red {
    background-color: #f88888;
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg);
}
  }
.blue img, .red img, .yellow img {
    width:100%;
}

@media screen and (max-width: 700px){
    .columns {
    width:100%;
    }
  .container{
      background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg);
      background-size:cover;
    height:auto;
  }
}

<div class="container clearfix">
    
<section class="columns blue">
<h3>About us</h3>
<p class="margin-top">How the gym became a reality</p> 
</section>    

<section class="columns yellow">
<h3>Manifesto</h3>
<p class="margin-top">Respect the rules</p> 
</section>           
    
<section class="columns red">
<h3>Contact us</h3>
<p class="margin-top">Have a chat with us</p> 
</section>      
    
</div>