Weather Widget Review & Question about Responsiveness

Weather Widget Review & Question about Responsiveness
0.0 0
#1

Good Afternoon,

I’ve completed my weather widget application, and I’m pretty happy with it, but would love some feedback if anybody had time to glance over it.

However, despite it looking good on my computer, when I decrease the browser size the responsive nature of bootstrap destroys the layout. Has anybody got any idea of how to stop this or how I should go about modifying my code so that the responsiveness doesn’t ruin it?

Thanks for all your help,
George

#2

Hey. You are using Bootstrap (4) and your columns are just doing what you told them to. They wrap on new lines when the screen resizes under a certain resolution.

If you don’t want them to, just remove the breakpoints from the classes. For example, your wind, pressure and humidity divs would become:

      <div class="col-4">
        Wind
        <p class="info wind"></p>
      </div>
      <div class="col-4">
        Pressure
        <p class="info pressure"></p>
      </div>
      <div class="col-4">
        Humidity
        <p class="info humidity"></p>
      </div>
#3

u can chk my code weather app
i’ve also used bootstrp to make it mobile responsive

#4

u can define media query
i.e; for small screen …make your div with class"row"
width=100% or 100vw
height=100% or 100vh