Gorgon_Union Gorgon_Union - 5 months ago 92
CSS Question

Bootstrap: Setting overlay div on responsive block columns

I'm trying to make a responsive page of 4 blocks using rows and columns with an image background and an overlay and title. I'm able to get everything to work except the width of the overlay.

Here is an image showing what I'm trying to fix. The column on the left side is always filled from left, but the right column is missing the full width of left and right side.

enter image description here

HTML

<div class="wrapper">
<div class="row" id="rows">
<div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
<div id="portfolio-overlay" class="titlePush">Portfolio</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
<div id="tools-overlay" class="titlePush">Tools</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 text-center about">
<div id="about-overlay" class="titlePush">About</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
<div id="contact-overlay" class="titlePush">Contact</div>
</div>
</div>
</div>


CSS

html,body,.wrapper {
height:100%;
width:100%;
}

#rows {
height: 30%;
font-family: 'Poiret One', cursive;
font-size: 24px;
color: white;
}


.portfolio {
height: 100%;
background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
-webkit-background-size:;
background-size: cover;
background-position: center;
}

/* Portfolio Overlay Block */
#portfolio-overlay {
background: rgb(0, 0, 0); /* fallback color*/
background: rgba(0, 0, 0, 0.4);
height: 100%;
max-width:100%;
}


Demo: JSFiddle

Answer

by default col-*-* have padding in bootstrap, you need to reset it. and you are missing class .container therefore you had horizontal scrollbar

Note: I used .text-center to reset padding just to simplify, because is a class within the same element applied to .col-*-*

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
 body {
  font-family: 'Poiret One', cursive;
}
html,
body,
.wrapper {
  height: 100%;
}
/* Header/Jumbotron Section */

.header {
  height: 40%;
  background-color: red;
}
/* Jumbotron Font Styling & Size */

.headFont {
  font-size: 10vh;
  color: white;
  text-decoration: underline;
  text-align: center;
  top: 15%;
}
/* Sets hyperlink color */

#rowLink {
  color: white;
}
/* Pushes box titles down */

.title {
  padding-top: 40px;
}
/*****************************************
            Content Blocks 
******************************************/

/* Rows-content Homepage */

#rows {
  height: 30%;
  font-family: 'Poiret One', cursive;
  /*font-size: 2.3vh;*/
  font-size: 24px;
  color: white;
}
.portfolio {
  height: 100%;
  /*background: red; /* For browsers that do not support gradients
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
  background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
  -webkit-background-size: ;
  background-size: cover;
  background-position: center;
}
/* Hover effects for portfolio block */

.portfolio:hover {
  text-decoration: underline;
}
/* Portfolio Overlay Block */

#portfolio-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Tools Block */

.tools {
  background-color: green;
  height: 100%;
}
/* Hover effects for tools block */

.tools:hover {
  text-decoration: underline;
}
/* Tools Overlay */

#tools-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* About Me Block */

.about {
  background-color: lightblue;
  height: 100%;
}
/* Hover effects for tools block */

.about:hover {
  text-decoration: underline;
}
/* About Me Overlay */

#about-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Contact Me Block */

.contact {
  background-color: darkorange;
  height: 100%;
}
/* Hover effects for tools block */

.contact:hover {
  text-decoration: underline;
}
#contact-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
.row .text-center {
  padding: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container wrapper">
  <div class="row header">
    <div class="col-sm-12 headFont jumboHero text-center">Monsieur Bigglesworth</div>
  </div>

  <div class="row" id="rows">
    <a href="#" id="rowLink">
      <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
        <div id="portfolio-overlay" class="title">Portfolio</div>
      </div>
    </a>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
      <div id="tools-overlay" class="title">Tools</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
      <div id="about-overlay" class="title">About</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
      <div id="contact-overlay" class="title">Contact</div>
    </div>
  </div>
</div>