CODEWITHSUNDEEP
htmlcsspositioncss-position
Becky
Becky

Reputation: 2275

Absolute positioning bottom issue

I have an element: #home-img-text-container2 that while in the viewport of under 640px I position it absolute and give it a bottom: 0; placement. My issue is that the #home-img-text-container2 goes past the main container/image #home-main-img.

I have set the container like this:

<div id="home-main-img">
        <img src="images/demolition-home.jpg" alt="Demolition and Wrecking" id="demolition1">
        <div class="home-img-text">
            <div id="home-img-text-container1">
                <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION <br> DONE RIGHT.</div>
            </div>
            <div id="home-img-text-container2">

Modified CSS

#home-img-text-container1, #home-img-text-container2 {
    position: absolute;
}
#home-img-text-container2 {
    bottom: 0%;
    width: 100%;
}
#home-img-text-description, #home-img-text-description2 {
    position: relative;
    display: inline-block;
    margin: 0px 0px;  
    padding: 20px 20px;
    font-size: 1.5em;
}

I don't understand why it won't position right at the very bottom of the image, rather than under it.

Does anyone see what I am doing wrong? Again, this is in the media query 640px

Upvotes: 0

Views: 49

Answers (1)

Hiral Suvagya
Hiral Suvagya

Reputation: 601

Here is the CSS

#home-main-img {
    position: relative;
    background: #000;
    width: 100%;
    height: auto;
    margin: 0;
}
#demolition1 {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
}
#demolition-mobile {
    width: 100%;
    height: auto;
    margin: 0;
    display: none;
}
.home-img-text {
    position: absolute;
    left: 13%;
    top: 25%;
}
#home-img-text-container1, #home-img-text-container2 {
    position: relative;

    opacity: 0;
    transition:1s; -webkit-transition:1s;
    overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
    opacity: 1;
    transform: translateX(30px); -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
    opacity: 1;
    transform: translateX(30px); -webkit-transform: translateX(30px);
}
#home-img-text-description, #home-img-text-description2 {
    position: relative;
    display: inline-block;
    margin: 30px 0px;  
    padding: 30px 20px;
    color: #FFF;
    background: rgba(0,0,0,.8);
    font-size: 2.5em;
    line-height: 1.4em;
}
#home-img-text-description:before, #home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
/*#home-img-text-description2:before {
    width: 80%;
}*/
#home-img-text-description:before, #home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
    font-family: 'open_sanslight';
}
#home-img-text-description2 {
    color: #efcd36;
    font-size: 1.8em;
}


/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------------------------*/

@media screen and (max-width:640px) {
#home-img-text-container1
{
  top:15%;
}
#home-main-img {
    height: 65%;
    width: auto;
}
#demolition1 {
    display: none;
}
#demolition-mobile {
    display: block;
}
#home-main-img img{
    width: auto;
    height: 100%;
    overflow: hidden;
    max-width: 100%;
}
.home-img-text {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}


/*
#home-img-text-container1, #home-img-text-container2 {
    margin-bottom: 10px;
}
#home-img-text-description, #home-img-text-description2 {
    margin: 10px 0px;  
    padding: 30px 20px;
    font-size: 1.3em;
    line-height: 1.4em;
}*/



#home-img-text-container1, #home-img-text-container2 {
    position: absolute;
}   
#home-img-text-container2 {
    bottom: 0%;
    width: 100%;
}
#home-img-text-container1.fadeDisplay {
    transform: translateX(0px); -webkit-transform: translateX(0px);
}
#home-img-text-container2.fadeDisplay {
    transform: translateX(0px); -webkit-transform: translateX(0px);
}

#home-img-text-description, #home-img-text-description2 {
    position: relative;
    display: inline-block;
    margin: 0px 0px;  
    padding: 20px 20px;
    font-size: 1.5em;
}
#home-img-text-description:before, #home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 0px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description2:before {
    width: 100%;
}
#home-img-text-description:before, #home-img-text-description2:before {
  top: 0px;
  transform: skewX(0deg);
  transform-origin: right bottom;
}
#home-img-text-description2 {
    font-size: 1.2em;
    width: 100%;
}
#description2-block {
    display: inline;
}

}

Upvotes: 2

Related Questions