CODEWITHSUNDEEP
htmlcssresponsive
Kevin
Kevin

Reputation: 928

Div moving after resizing

enter image description here

This is what i want to achieve ^ (this is the view on an iphone5 320x568)

But when i resize the window (to iphone 6 375x667 ) i get this

enter image description here

HTML:

    <div id="container">
        <div class="slicedimage">
            <div class="textboxtransparant">
                <h2>Since 1928</h2>
                <div class="divider"></div>
                <br/>
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
                </p>
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
            </div>
            <div class="transparantblack"></div>
        </div>
       <div class="slicedimage">
         <div class="textboxblack">
             <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non 
             </p>

         </div>
         <div class="blacktransparant"></div>
         <div class ="line"></div>
       </div>

CSS: 

  body {
      margin: 0;
      padding: 0;
      font-size: 16px;
      /*font-family: Georgia;*/
      font-family: sans-serif;
      max-width: 640px;
      color: black;
  }

  #container {
      display: block;
      height:900px;
      width: 100%;
      position: relative;
      top: 50px;
      margin: 0;
      color: white;
      text-align: center;
  }

  .slicedimage {

      background-image:url('https://i.sstatic.net/yEQ6k.jpg');
      width:100%;


  }



    .textboxblack {

      background-color:black;

  }


  .line {

  position: absolute;
  width:1px;
  height: 50px;
  bottom: 80px; /*half the height*/
  left: 50%;
  border-left: 1px solid white;

  }

  .transparantblack {
    height: 100px;
  width: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
  }

.blacktransparant {
      height: 100px;
    width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
    }

  .blackgray {
    height:300px;
    width:100%;
    background:linear-gradient(341deg, #8a8a8a  0%, #8a8a8a  31.9%, #000 32.1%, #000 100%);
  }

updated the post and since stack overflow is asking me to add more information since my post is mostly code. Yeah u get the point, lets see if this is enough. "information"

Upvotes: 2

Views: 121

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

Your goal was to keep the white line under the text, in the middle of the blacktransparent element.

To achieve this you need to make from the line element, a child of the blacktransparant div:

<div class="blacktransparant">
   <div class="line"></div>
</div>

and set the blacktransparant to be relative:

.blacktransparant {
   height: 100px;
   width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
   /* Add this */
   position: relative;
}

After this you only have to set the arrow in the right place relatively to the blacktransparant div:

.line {
   position: absolute;
   width: 1px;
   height: 50px;
   /* bottom: 80px; Change to 25px */
   bottom: 25px;
   left: 50%;
   border-left: 1px solid white;
}

Upvotes: 1

Related Questions