div not positioning on mobile correctly

div position right
position: fixed mobile scroll
css position
css positioning best practices
position: sticky
position:fixed not working on mobile
responsive positioning css
two divs side by side inline-block

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>

Add in media query this css

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

html - div not positioning on mobile correctly, Add in media query this css @media only screen and (max-width: 600px){ .​topSection { display: unset; } }. Talk about basic. Let’s see how this is supported on mobile browsers. Mobile CSS Fixed Positioning Support. Mobile Safari – iOS5 and after has strong support for fixed positioning. iOS4 and below simply treats elements as static and scrolls them along with the rest of the page. Android. Android 2.1 and below no fixed positioning.

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

Common problems for layout elements in CSS, Well it's very frustrating in css when we can't apply perfect position to In current scenario you have parent div and its respective child divs positioned in as an replacement to grid layout which is not supported in some of the  Then from there you can position everything around and use breakpoints to make sure it degrades gracefully. As for your image there with the leaves you have two options. If you are going to want that full screen you would not constrain it to the aforementioned 1300px container but allow it to go to 100% and perhaps impose some sort of max height on it so you don’t end up with a monster image.

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

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

Fixed Positioning in Mobile Browsers, Unfortunately, there's no cut and dry method of detecting fixed positioning and assuring that Duration: 10:33 Posted: Nov 10, 2011 If floated divs are used with relative positioning without stating top and left positions, each div is positioned relative to adjacent divs or other block elements in the html file. An instruction to float will tell it to move relative to the normal relative position.

 @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 .

Flexible Layouts with CSS Positioning – A List Apart, In our example, this means that a set of four absolutely positioned DIVs can line Not only that, the layout holds together regardless of the number of columns. The new fix for IE8 rather than using display:table is very simple and it just requires setting height:1%; on the #wrapper:after block. That forces IE8 to look back to the #wrapper and confirm the min-height:100%; Min-height is not a defined height so it is not actually making the :after block 1% high.

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%;
}

}

How to use the position property in CSS to align elements, Positioning elements with CSS in web development isn't as easy as it seems. Your browser does not currently recognize any of the video formats and additional properties for setting the coordinates of an element (I call  absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling.

4 reasons your z-index isn't working (and how to fix it), Z-index is a CSS property that allows you to position HTML elements in layers on top that determine stacking order is if an element has its position set or not. have their position set and z-index numbers in the correct order. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

CSS- Div- Be Careful When You Size Your Divs, color, border, etc.) Height and width attributes; Absolute positioning Table cells stretch to fit the content placed inside them, but DIVs may not! Like so many​  As is usually the case with the best CSS 2 technologies (see also the 'position:fixed' property), this is not correctly or consistently implemented in all the browsers. Good Div things: Div tags serve very well for the following purposes: Acting as container elements for sub–elements, like paragraphs.

position, An element with position: static; is not positioned in any special way. A static element is Mobile browsers have surprisingly shaky support for fixed. Learn more  Positioning elements with CSS in web development isn’t as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals with aligning HTML elements, you won't be able to fix your alignment issues. There are different ways/methods for positioning elements with pure CSS. Using CSS float, display and position properties

Comments
  • Thank you. Works perfect. One last thing - how do I push that info-container slightly up so just directly under the logo, if possible.
  • Ignore above comment, just needed to add a br tag in html. Thanks again.
  • Problem is solved. Thank you for your help and time.