Responsive images

Developing with Concrete
1

Not sure if I should be asking help here but tried almost everything. I want the parallax images to be responsive without the parallax on mobile. Keep getting parallax on mobile but images not responsive. Can anyone help ?

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Roboto", sans-serif;
  color: #141414;
  
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image: url("image");
  min-height: 900px;

 
}

.bgimg-2 {
  background-image: url("image");
  min-height: 900px;
}

.bgimg-3 {
  background-image: url("image");
  min-height: 900px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #fff;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Roboto", sans-serif;
  color: #111;
 
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

</style>
</head>
<body>

<div class="bgimg-1">
  <div class="caption">
  <span class="border">WELCOME | HI</span>
  </div>
</div>

<div style="color: #141414;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">blah</h3>
  <p>blah blah blah</p>
</div>

<div class="bgimg-2">
  <div class="caption">
  <span class="border" style="background-color:black;font-size:25px;color: #fff;">blah</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#141414;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">blah</h3>
        <p>blah blah blah</p>
  </div>
</div>

<div class="bgimg-3">
  <div class="caption">
  <span class="border" style="background-color:black;font-size:25px;color:#fff;">blah</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#141414;background-color:#fff;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">blah</h3>
        <p>blah blah blah.</p>
  </div>
 </div>
2

Not sure if this makes a difference, but typically I would stick with max width vs. max device width as they’re not quite the same.

I would also try to load your styles into the stylesheet and not set them on the elements themselves - it can get pretty confusing to have styles in both places.

Otherwise seems like it should work.

3

Hi Evan
Thanks for response and sorry for taking so long in responding.
It made no difference even using both of your ideas. Thanks anyway.
Terry