CODEWITHSUNDEEP
htmlcss
Aadil Mangera
Aadil Mangera

Reputation: 35

div not positioning on mobile correctly

My div class info-container doesn't seem to be positioned proper on mobile. Code seems ok, so not sure what the problem is. I want the class info-container underneath the logo in mobile only. However the code isn't seem to be making effect. I am fairly new to html/css 

 .topSection {
    display: flex;
    justify-content: space-between;
    }

    .info-container {
    display: flex;
    flex-direction: column;
    }

    .info {
     display: flex;
     align-items: center;
     } 

      .info img {
      margin-right: 8px;
      }

      @media only screen and (max-width: 600px) {
    .info-container {
        position: relative;
        top:12px;
        left:5px;
        }
        }
    
    <div class="topSection">
    <div class="logo">
    <a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img 
    src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png" 
    alt="Logo"></a>
    </div>
    <div class="info-container">
    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
      <a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
    </div><br>

    <div class="info">
      <a href="https://www.google.co.uk/maps/dir/''/elegant+curtains+and+blinds/@53.6967136,-1.7011525,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x487960059226814f:0x337f355d1975d87c!2m2!1d-1.631113!2d53.696734" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;"></a>
      <p style="color:#2B8C1A">Visit Our Showroom</p>
    </div><br>

    <div class="info">
      <a href="https://youtu.be/DAasK7kF2DQ" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank""></a>
      <p style="color:#2B8C1A">Watch Our Video</p>
    </div>
    </div>
    </div>

Upvotes: 1

Views: 521

Answers (5)

swarna
swarna

Reputation: 24

add below css code for mobile layout

@media only screen and (max-width: 600px){
.topSection {
    display: block;
    justify-content: space-between;
    clear: both;
    overflow: hidden;
}
.info-container {
    position: relative;
    top: -28px;
    left: 0;
    display: inline-block;
    width: 100%;
    float: left;
    clear: both;
}
.info {
    float: left;
    width: 33%;
}

}

Upvotes: 0

Manish Kumar
Manish Kumar

Reputation: 33

 @media only screen and (max-width: 600px) {
.info-container {
    position: relative;
    top:12px;
    left:5px;
    }
    .topSection {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
}

Please check this code it working .

Upvotes: 0

Manpreet Matharu
Manpreet Matharu

Reputation: 90

It was not showing properly because of flex property, try adding below css.

@media only screen and (max-width: 600px) {
  .topSection {
    display:block;
  }
}

Upvotes: 0

Denis L.
Denis L.

Reputation: 424

Add display:block; to parent class on mobile http://prntscr.com/kdq5tq

Upvotes: 0

Manthan Kanpariya
Manthan Kanpariya

Reputation: 104

Add in media query this css

@media only screen and (max-width: 600px){
    .topSection {
       display: unset;
    }
}

Upvotes: 1

Related Questions