CSS responsive Div

Question

I am trying to make a responsive page on which, when the page is smaller than 800px, the 2nd div will go down to 2nd column with 100% of page, and the 1st div will be also 100% of page. Currently when the screen is smaller than 700px, the 2nd div will move down but the position of 1st and 2nd messed up, kindly find the picture 1 for full size, picture 2 when mobile view.

Picture 1, Monitor view

Picture 2, Mobile View

Below is my html and css code.

.about-us__sec1-image {   
  left: 100px;
  max-width: 700px;
  width:100%;
  height:400px;
  position: relative;
  display:inline-block;
  padding-top: auto;
}
    
.about-us__sec1-paragraph {
  vertical-align:top; 
  display:inline-block;
  position:relative;
  top:20px;
  margin: 10px; 
  background-color: blue;
  height: 300px;
  width: 400px;
  max-width: 100%;
  font-size: 30;
  font-family: Trebuchet MS;
  padding: 30px;
  line-height: 1.5em;
  color: white;
  border-radius: 25px;
}

<div class="about-us__section1__wrapper">
  <img class="about-us__sec1-image" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Nature of Mountain">
  <div class="about-us__sec1-paragraph">This is the beauty of nature</div>
</div>

Here are some links about media queries: https://stackoverflow.com/q/6370690/media-queries-how-to-target-desktop-tablet-and-mobile https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ https://css-tricks.com/css-media-queries/ https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — corn on the cob, Oct 04 '20 at 18:43

score 0 · Accepted Answer · answered Oct 04 '20 at 22:01

As said in the comments above, you should use media queries. Here a snippet of what you want to achive. Hopefully it helps.

.about-us__sec1-image{   
  left: 100px;
  max-width: 700px;
  width:100%;
  height:400px;
  position: relative;
  display:inline-block;
  padding-top: auto;
}

.about-us__sec1-paragraph{
  vertical-align:top; 
  display:inline-block;
  position:relative;
  top:20px;
  margin: 10px; 
  background-color: blue;
  height: 300px;
  width: 400px;
  font-size: 30;
  font-family: Trebuchet MS;
  padding: 30px;
  line-height: 1.5em;
  color: white;
  border-radius: 25px;
}

@media screen and (max-width: 800px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .about-us__sec1-paragraph {
    display: block;
    position: static;
    background-color: blue;
    height: 300px;
    width: auto;
    margin: 0; 
    font-size: 30;
    font-family: Trebuchet MS;
    padding: 30px;
    line-height: 1.5em;
    color: white;
    border-radius: 0px;
  }

  .about-us__sec1-image {
    position: static;
  }
}

<div class="about-us__section1__wrapper">
        <img class="about-us__sec1-image" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Nature of Mountain">
    <div class="about-us__sec1-paragraph">This is the beauty of nature</div>

Hi Marco, yes it works. but do the body have to set to display flex? currently im trying to do it responsive without having changes on the body. — dragkin, Oct 05 '20 at 06:43
I set the body to display flex because you didn't have any other container. You can wrap the image and the paragraph in a div container and then give display flex to that container. Basically I was using the body as the container. EDIT: I am sorry, somehow I didn't see you actually HAD a container. Try giving display flex and flex direction set to column to the wrapper div you already have. should be the same result — marco marco, Oct 05 '20 at 09:18

score 0 · Answer 2 · answered Oct 04 '20 at 22:24

0

Concerning the whitespace to the left of the image: Erase left: 100px; from .about-us__sec1-image - this offsets the element 100px to the right (if it has position: relative ike in your case.

answered Oct 04 '20 at 22:24

Johannes

64,305
18
73
130

Hi Johannes, the left will need to be there when in monitor size as im designing as that, but currently i wan it to become 2 rows with full width when on mobile. – dragkin Oct 05 '20 at 06:44
1

Well, of course you'll need a media query to apply that only to mobile, similar to @media screen and (max-width: 700px) { .about-us__sec1-image {left: 0; } } – Johannes Oct 05 '20 at 08:46

CSS responsive Div

2 Answers2