html - Move title to the bottom with CSS -


how can move title bottom on screen on max-width 640px without changing structure on html file?

#header-image {    width: 100%;    position: relative;  }    .header-title {    color: #000000;    font-size: 3em;    font-weight: 700;    position: absolute;    top: 25%;    width: 255px;    right: 50px;    text-align: left  }    .bottom-bar {    display: block;    height: 25px;    width: 100%;    background- color: #007cb0;  }    .screen-480 {    display: none;  }    .screen-768 {    display: block;  }    @media screen , (max-width: 480) {    .screen-480 {      display: block;    }    .screen-768 {      display: none;    }  }
<div id="header-image">    <div class="image">      <div class="header-title">the quick brown fox jumped on lazy dog</div>      <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen-      480" alt="img" />      <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen-      768" alt="img" />    </div>    <div class="bottom-bar"></div>  </div>

rather having top:25%, make bottom instead , put amount of how far want bottom. altered code make centered @ bottom, if that's wanted.

#header-image {    width: 100%;    position: relative;  }    .header-title {    color: #000000;    font-size: 3em;    font-weight: 700;    position: absolute;    bottom: 10%;    width: 255px;    margin:auto;    display:block;  }    .bottom-bar {    display: block;    height: 25px;    width: 100%;    background-color: #007cb0;  }    .screen-480 {    display: none;  }    .screen-768 {    display: block;  }    @media screen , (max-width: 480) {    .screen-480 {      display: block;    }    .screen-768 {      display: none;    }  }
<div id="header-image">    <div class="image">      <div class="header-title">the quick brown fox jumped on lazy dog</div>      <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen-      480" alt="img" />      <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen-      768" alt="img" />    </div>    <div class="bottom-bar"></div>  </div>


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -