Bootstrap changing text vertical position with responsive img

Question

I have 2 columns with responsive background images and text overlays vertically centered. How can I make the text overlay behave responsive according to the automatically resizing of the images? In other words, the text should always be vertically centered based on image height.

The problem I am having is that I had to define a height to make the text vertically aligned in the first place (e.g. try removing the height, the text will align top). When changing screen width, the 300px height of the background is ignored (intentional) with 'background-size: 100% auto;'. But that does not apply to the text, as it is keeps centering on the 300px height. How can I solve that without using various media queries for different sizes?

.two-pics-1 {
  background-image: url('http://via.placeholder.com/1000x500');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
}
.two-pics-2 {
  background-image: url('http://via.placeholder.com/1000x500');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px !important;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
  <div class="row mb-5">
    <div class="col-md-6 mb-3">
      <div class="container">
        <div class="row two-pics-1">
          <div class="col-md-12 text-center my-auto">
            <h2>Setup & Support</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="container">
        <div class="row two-pics-2">
          <div class="col-md-12 text-center my-auto">
            <h2>Tech Specs</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Yorki Bonilla · Answer 1 · 2017-11-24T19:05:30.757

In order to achieve what you want, you need to define media queries to your code, and tell it how to behave in different screen sizes.

Use breakpoint mixins like this:

.something {
   padding: 5px;
   @include media-breakpoint-up(sm) { 
     padding: 20px;
   }
   @include media-breakpoint-up(md) { 
     padding: 40px;
   }
 }

http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

v4 beta breakpoints reference

Here is a full list of the media queries

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

breakpoint & up values:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

breakpoint & down (toggle on value and down):

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

breakpoint & down values:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its 
width

breakpoint only:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

breakpoint only values (toggle in between values only):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Found this info here (Using media breakpoints in Bootstrap 4-alpha)

Just to give credit to where I found the media query detailed list!!

If you need help setting this up let me know.

Bootstrap changing text vertical position with responsive img

1 Answers1