CODEWITHSUNDEEP
htmlcss
dollaza
dollaza

Reputation: 213

How to make space between two divs smaller

I have two divs within another div. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.content {
  display: table-cell;
  height: 100vh;
}

#about {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#aboutInfo {
  font-size: 45px;
  overflow: auto;
}

#aboutImage {
  padding: 0;
  margin: 0;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #about {
    flex-direction: column;
    height: 100%;
  }
  #about #aboutImage {
    max-width: 100%;
    height: auto;
  }
  #about #aboutInfo {
    max-height: 200px;
    margin: auto;
  }
}
<div class="content" id="about">
  <div id="aboutImage">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div id="aboutInfo">
    <p> A really long text here, multiple lines of sentences </p>
  </div>
</div>

How do I make the space between the two divs smaller while also maintaining the responsive elements? I tried adding margin-left: -200px under aboutInfo and this definitely reduced the space between the divs however the image overlapped the other div when the window was resized so that didnt work. Is there a different way to achieve a smaller space?

Upvotes: 1

Views: 3225

Answers (2)

SergeDirect
SergeDirect

Reputation: 2069

Here are several rules of responsive design, that will make your site user-friendly, whilst giving you as a developer - flexibility & stability across different browsers & OS:

  1. Use "viewport" meta to tie resolution to visitor's device width, as well as when using @media screen.

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

  2. Make use of CSS cross Browser Support References:

-webkit-,-moz-,-ms-

e.g. -webkit-margin-left: 10px - this will affect webkit browsers only e.g. Chrome. Also if you can use JavaScript to add additional unique class names based on user agent output (navigator.userAgent). For example sometimes Chrome renderers differently on different OS (Windows vs Mac)

  1. Position wrappers relatively to body, whilst children can be of absolute positioning for stealthier control.

e.g.

       `<div class="parent-div">
            <div class="child">
            </div>
       </div> 
       <style>
           .parent-div{
                position:relative;
           } 
           .child{
                position:absolute;/*absolute positioning of parent element*/
           }
       </style>`
  1. Consider using CSS frameworks to automate & speed up your work. e.g. Bootstrap http://getbootstrap.com/2.3.2/scaffolding.html

Upvotes: 1

6Aashis
6Aashis

Reputation: 306

You can use negative margin top for div elements. use class to differ between two inside div's . and CSS property margin-top: -2px;.

In css file `

div1 {

margin-top : -2px; }`

Upvotes: 0

Related Questions