CSS Landing Page has scroll it should be fixed

HTML-CSS
1

The screenshot below shows the layout i’m trying to achieve with my code. I’m having issues with the header and footer areas as they are not aligned according to the mockup. There also seems to be an issue with the content area that should show on the page. The page should fit on one screen without the scrolling div. It should be responsive but i have that part figured out. Its the full page layout i’m having issues with.

Dakel - desktop
Dakel - desktop1920×1079 296 KB

the code i have is as follow:

<head>
  <title>Winery
  </title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head> 
<div class="wrapper">
  <div id="header">
    <div>
      <p>Mailing List</p>
    </div>
  </div>

<div class="hero"> 
</div>
  <div id="main-left">
    <article class="articleClass">
      
   <!--Flex Area-->
      <div id="flex">
        <div class="image">
          <img src ="DK_Logo.png"/>
        </div>
        <div class="about">
          <p>
            Chardonnay and Pinot Noir from cool, coastal vineyards located in the shadow of Chile’s Andes mountains.
          </p>
        </div>
        <div class="currentRelease"> 
          <p class="links">
            CURRENT RELEASE 
          </p>
          <p class="ital"> chardonnay &nbsp &nbsp &nbsp/ &nbsp &nbsp &nbsp pinot noir 
          </p>
          <p class="allocate">REQUEST AN ALLOCATION</p>
        </div>
        <div class="allocation"> 
           <p class="bottom">We invite you to explore Dakél Chardonnay and Pinot Noir from Chile’s Itata Valley - a winemaking passion project from the celebrated winemaking team of Andres Sanchez, 
          Randy Ullom, and Don Hartford. DAKÉL roughly 
          translates as “to woo” – which is exactly what this cool climate Chilean region did when the trio set out to find the best terroir for creating extraordinary, site-reflective Chardonnay and Pinot Noir in Chile. 
        </p>
        </div>
      </div>
      <!--End Flex Area-->
    
    </article>

   
 </div> 
<div class="mainBottom">
     
      <p>©DAKÉL Wines, SANTA ROSA, California  | PRIVACY / SHIPPING / TERMS</p>
  
  </div>
  </div>



</div>
</body>
<!-- CSS Code Here  -->

 *{
    margin:0;
     padding:0;
}
 @font-face {
     font-family: "hoefler_text_regular-webfont";
    /*src: url("fonts/CustomFont.eot");
    */
     src: url("fonts/hoefler_text_regular-webfont.woff") format("woff"), 
    /*url("fonts/CustomFont.otf") format("opentype"), url("fonts/CustomFont.svg#filename") format("svg");
    */
}
 .hero {
     background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
     height: 500px;
     background-position: right;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 0;
     margin: 0;
     width: 100%;
}
 #main-left {
   /*  position: absolute;*/
     padding-top: 0px;
     padding-left: 25px;
     width: 100%;
     padding-right: 25px;
     background-image: url("../DAK_BG.png");
     text-align:center;

}
 img{
     width:100%;
}
 #header {
     font-size: 0.8em;
     float: right;
     padding: 50px;
}
 #footer {
     /*position: relative;
     margin-top: 15px;
     height: 50px;*/
     width: 100%;
     text-align: center;
     font-size: 0.8em;
     background-image: url("../DAK_BG.png");
     bottom:0;
   color:#B66F07;

}
 .about {
    color:#B66F07;
     font-family: "hoefler_text_regular-webfont";
     text-transform: uppercase;
}
/*.links {
    font-size:15px;
     font-family: "Garamond"
}
*/
 .bottom {
    font-size:15px;
     font-family: "Garamond";
   color:#403F3C;
}
.ital {
    font-style: oblique;
    padding-bottom: 15px;
    color:#403F3C;
}
 .ital:after{
     content: "";
     display: block;
     margin: 0 auto;
     width: 40%;
     
     padding-top: 20px;
     border-bottom: 1px solid black;
}
 .currentRelease:before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 40%;
     padding-top: 20px;
     border-bottom: 1px solid black;
}
 .currentRelease{
    margin-bottom:35px;
}
 .allocate::before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 50%;
     border-bottom: 1px solid black;
}
 .allocate:after {
     content: "";
     display: block;
     margin: 0 auto;
     width: 50%;
     border-bottom: 1px solid black;
}
 .allocate p{
    height:36px;
}
 .height h5 {
    line-height: 0px;
}
 .language p{
    text-transform: uppercase;
     font-family:"Garamond";
}
 .allocation {
     padding-bottom: 10px;
}

#flex { display: flex; flex-direction: column; }
.image{ order: 1; }
.about { order: 2; }
.currentRelease { order: 3; }
.allocation { order: 4; }

 @media only screen and (min-width: 768px){
body{

x-overflow: hidden;

y-overflow:hidden;

}


     
 *{
    margin:0;
     padding:0;
}
     .hero {
        display:none;
         background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
         height: 100%;
         background-position: right;
         background-repeat: no-repeat;
         background-size: cover;
         margin: 0;
         width: 100%;
         position: absolute;
    }
     .articleClass {
         position: relative;
         padding-left: 25px;
         width: 85%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
         margin: auto;
         padding: 50px;
        /* float: left;
        */
    }

   #header {
    font-size: 16px;
    float: right;
    padding: 50px;
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px;
        padding-top: 50px;
    padding-top: 50px;
    padding-top: 10px;
    font-family: Garamond;
    text-transform: uppercase;
}
    /* #header {
         font-size: 0.8em;
         float: right;
         padding: 50px;
         padding-top: 50px;
         padding-top: 10px;
    }*/
    /*#main-left {
         position: absolute;
         padding-left: 25px;
         width: 50%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
    }
    */
     #main-left {
         position: relative;
         padding-left: 25px;
         width: 50%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
         margin: auto;
         padding: 50px;
         float:left;
    }
     .about {
        color:#B66F07;
         font-family: "hoefler_text_regular-webfont";
         text-transform: uppercase;
    }
     .links, .allocate {
        font-size:15px;
         font-family: "Garamond";
         text-transform:uppercase; letter-spacing: 5px;
    }
     .wrapper {
         background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
         height: auto;
         background-position: right;
         background-repeat: no-repeat;
         background-size: cover;
         margin: 0;
         width: 100%;
         position: absolute;
    }

 .allocate::before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 65%;
     border-bottom: 1px solid black;
}
 .allocate:after {
     content: "";
     display: block;
     margin: 0 auto;
     width: 65%;
     border-bottom: 1px solid black;
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    
    text-align: right;
}

#flex { display: flex; flex-direction: column; }
.image{ order: 1; }
.about { order: 2; }
.currentRelease { order: 4; }
.allocation { order: 3; }
.mainBottom {
    bottom: 0;
    position: absolute;
    width: 90%;
    text-align: right;
}
.mainBottom{
    font-family: Garamond;
    text-transform: uppercase;
}

}
2

Hello there,
You may use overflow: hidden property in css.

2 Likes
3

Hey Thanks for your assistance. I’m getting this view now when i use the overflow property.

canvas
canvas1740×875 319 KB

the bottle should fit in the page. thanks again! ! !

2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.