Need help making my WeatherApp responsive

HTML-CSS
1

Everything works decent with my app so far except when I resize the browser window vertically, the content goes off the screen and I can’t scroll up to see it. How do I prevent this from happening?

2

Looks like the big issue here is that you’re adjusting the position with negative margin values (margin-top: -300px; , for example)

The simplest way to have your items aligned in the center might be:

.main {
    font-size: 2em; 
    position: absolute;
    min-height: 600px;
    width: 100%;
}

This means the entire section will be 100% wide, and at least 600px tall.

That said, you could also go the next step by creating a new div within main to contain a styled box:


    <div class="main">  
      <div class="box">
        <h1>FreeCodeCamp Weather App</h1>
        <div class="location"></div> 
         <div class="temp"></div>  
          <div class="icon">
             <img src="" alt="" class="weatherGIF">
          </div>
          <div class="description"></div> 
      </div>
    </div>

You could then center align the box with:

.box {
  margin: 0 auto;
}

The benefit here is that you can now style the box any way you want independently of the container.

1 Like
3

hrm. well what I was trying to do was center the ‘box’ horizontally AND vertically.

4

Here’s a CodePen example of both horizontal & vertical centering. The one change you’d need to take into account is the height of the container (<main> in this example). Instead of a height of 200px, you would want 100vh.

5

really appreciate the help but i still don’t know how to fix my weatherApp from your codePen example? I tried wrapping my .main with a .container div and then setting .container to 100vh but it didn’t change anything. I am a bit of a CSS newb so I am diving in deeper but it would be nice to know how to solve this specific problem (prevent the content from going off-screen when I resize my browser vertically) since I am currently stuck on it.

6

Since you only have essentially one main div and some stuff inside it. You only need a few lines of CSS to do this. I recommend looking at something like Flex-Box or Grid CSS tutorials I personally like Wes Bos or LevelUpTuts. Just google them.

But for the short answer; I simplified the body to:

body {
    background-color: #1B1D28;
    font-family: 'Roboto', sans-serif;
    color: white;
}

And then you only need two lines of css to fix your .main div.
Play with margin and text-align. that should get it done. You can leave your font-size as is.

7

Hey @iamcharliekim, I combined your CodePen w/ the “Center Black with Fixed Heigh and Width” example I posted. Take a look at the adjustments and let me know if you have Q’s.

8

It works for me. But maybe you should do the text smaller and in the center of the page.

9

hrm, this example still has the same issue where the content goes off the page when I reduce the size of the browser-window vertically.

10

This should only occur at window heights around 100px or less. So, this shouldn’t interfere with any user’s experience on any typical device. If it bugs you, just set the margin from -100px to 0 on the box class.

11

I think this is the best attempt I’ve made so far with positioning my div horizontally/vertically centered while maintaining responsiveness. I still don’t understand why my ‘h1’ element goes off the screen when I resize the browser window vertically all the way up? The ‘h1’ should stay where it is and everything underneath it should be accessible with the scroll-bar when I decrease the browser vertically.

Thoughts? or could you point me to some resource that can explain why this is happening ? I’ve tried to search for it but can’t find anything

12

You can try this.

body {
  background-color: #1B1D28;
  font-family: 'Roboto', sans-serif;
  color: white;
  display: flex;
  height: 100vh;
}

.main {
  max-width: 800px;
  text-align: center;
  margin: auto;
}
1 Like
13

Thank you! Finally it works.

Do you mind explaining what I was doing wrong with my CSS (why was my ‘h1’ going off the screen)?

14

I wouldn’t say there was anything wrong with it.

I don’t really remember the original code you had but i do know it was using positioning. With absolute positioned elements even though it’s position is relative to some containing block it is not really contained and can overflow the container. I believe that is what you were seeing.

15