Skip to main content
M
mikarmagsp
Participating Frequently
March 11, 2017
Answered

Responsive website not flowing correctly, please help.

  • March 11, 2017
  • 1 reply
  • 350 views

I am trying to build a responsive website and I can not get it to flow correctly. I'm sure it's something simple but I seem to be overlooking it. Here is my issues...

  1. The site when in a larger format (tablet or desktop) is not flowing the images (which are in div tags) in a row but instead, it is leaving them in a single column.
  2. The background which these divs are located on top of is being knocked out for the site's main background color.

ANY help with this will be GREATLY appreciated. I am testing it at the following link (Celestial Setters ) if you want to look at the code.

-THANKS!!!

The HTML looks like this...

<div class="row">

       <div class="col col-md-one-half">

            <div class="vann-box"><a href="#" class="button">Vann</a></div>

            <div class="henry-box"><a href="#" class="button">Henry</a></div>

            <div class="parker-box"><a href="#" class="button">Parker</a></div>

            <div class="johncreasy-box"><a href="#" class="button">John Creasy</a></div>

            <div class="huck-box"><a href="#" class="button">Huck</a></div>

       </div>

  </div>

The CSS looks like this...

     BEFORE THE @MEDIA CHANGE

.row:before, .row:after {

       content: "";

       display: table;

       }

.row:after {

       clear:both;

       }

.col {

      width: 100%;

     }

The other div class boxes that are listed in the HTML are duplicates of the following one but with the URL changed. So I'm only showing one of them.

.vann-box {

      background-image: url(../images/dogs/van/van_head.jpg);

       background-size: cover;

       background-position: center;

       color: #FFFFFF;

       padding: 250px 20px 60px;

       text-align: center;

       text-decoration: none;

       height: 300px;

       }

     AFTER THE @MEDIA CHANGE

.col-md-one-half {

       width: 50%;

      }

  .col {

       float: left;

       padding: 0px 0px 0px;

       }

This topic has been closed for replies.
Correct answer BenPleysier

Try

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
  background-color: black;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear:both;
}
.col {
  width: 100%;
}
.col-md-one-half {
  float: left;
  width: 50%;
}
.vann-box {
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.henry-box {
  background-image: url(../images/dogs/henry/henry7.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.parker-box {
  background-image: url(../images/dogs/parker/parker_head.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.johncreasy-box {
  background-image: url(../images/dogs/john_creasy/john_creasy3.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.huck-box {
  background-image: url(../images/dogs/huck/huck_main_2.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
</style>
</head>
<body>
<div class="row">
  <div class="vann-box col-md-one-half"><a href="#" class="button">Vann</a></div>
  <div class="henry-box col-md-one-half"><a href="#" class="button">Henry</a></div>
  <div class="parker-box col-md-one-half"><a href="#" class="button">Parker</a></div>
  <div class="johncreasy-box col-md-one-half"><a href="#" class="button">John Creasy</a></div>
  <div class="huck-box col-md-one-half"><a href="#" class="button">Huck</a></div>
  </div>
</body>
</html>

Having said that, images that do not feature in the article may be placed as a background image (design). Images that do feature in an article, as in this case, must be placed in the foreground (content) together with a suitable ALT attribute.

Also have a look at A Complete Guide to Flexbox | CSS-Tricks

1 reply

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
March 12, 2017

Try

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
  background-color: black;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear:both;
}
.col {
  width: 100%;
}
.col-md-one-half {
  float: left;
  width: 50%;
}
.vann-box {
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.henry-box {
  background-image: url(../images/dogs/henry/henry7.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.parker-box {
  background-image: url(../images/dogs/parker/parker_head.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.johncreasy-box {
  background-image: url(../images/dogs/john_creasy/john_creasy3.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
.huck-box {
  background-image: url(../images/dogs/huck/huck_main_2.jpg);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  padding: 250px 20px 60px;
  text-align: center;
  text-decoration: none;
  height: 300px;
}
</style>
</head>
<body>
<div class="row">
  <div class="vann-box col-md-one-half"><a href="#" class="button">Vann</a></div>
  <div class="henry-box col-md-one-half"><a href="#" class="button">Henry</a></div>
  <div class="parker-box col-md-one-half"><a href="#" class="button">Parker</a></div>
  <div class="johncreasy-box col-md-one-half"><a href="#" class="button">John Creasy</a></div>
  <div class="huck-box col-md-one-half"><a href="#" class="button">Huck</a></div>
  </div>
</body>
</html>

Having said that, images that do not feature in the article may be placed as a background image (design). Images that do feature in an article, as in this case, must be placed in the foreground (content) together with a suitable ALT attribute.

Also have a look at A Complete Guide to Flexbox | CSS-Tricks

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    M
    mikarmagspAuthor
    Participating Frequently
    March 14, 2017

    This worked GREAT, and THANK YOU!!!!

    I will take a look at the guide as well.

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices