Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I have created wweather site using react js. but when i open it on mobiles the overflow not work. here is my code.

App.js
JavaScript
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css"
import { useEffect, useState } from "react";
import './App.css';

function App() {


  const apiKey = "1815b2003ad4cef38e6b16343a9034ca"
  const [inputCity, setInputCity] = useState("")
  const [data, setData] = useState({})


  const getWetherDetails = (cityName) => {
    if (!cityName) return
    const apiURL = "https://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&appid=" + apiKey
    axios.get(apiURL).then((res) => {
      console.log("response", res.data)
      setData(res.data)
    }).catch((err) => {
      console.log("err", err)
    })
  }

  const handleChangeInput = (e) => {
    console.log("value", e.target.value)
    setInputCity(e.target.value)
  }

  const handleSearch = () => {
    getWetherDetails(inputCity)
  }


  return (
    <div className="col-md-12">
      <div className="wetherBg">
        <h1 className="heading">Check Weather</h1>

        <div className="d-grid gap-3 col-4 mt-4">
          <input type="text" className="form-control"
            value={inputCity}
            onChange={handleChangeInput} />
          <button className="btn btn-primary" type="button"
            onClick={handleSearch}
          >Search</button>
        </div>
      </div>

      {Object.keys(data).length > 0 &&
        <div className="col-md-12 text-center mt-5 box">

          <div className="shadow rounded wetherResultBox">
            <img className="weathorIcon"
              src="https://i.pinimg.com/originals/77/0b/80/770b805d5c99c7931366c2e84e88f251.png" />

            <h5 className="weathorCity">
              {data?.name}
            </h5>
            <h6 className="weathorTemp">{((data?.main?.temp) - 273.15).toFixed(2)}°C</h6>
            <h6 className="weathorTemp">{data?.wind?.speed} Wind Speed</h6>
            
          </div>
        </div>
      }

    </div>
  );
}

export default App;

here is App.css
CSS
body{
  overflow: hidden;
  overflow-y: hidden;
  
}


.wetherBg{
  background: url("https://www.accuweather.com/images/hero/4/1440x450.jpg");
  height: 50vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.heading{
  color:white;
  font-weight: 700;
}
.wetherResultBox{
  margin: auto;
  width: 500px;
  height: 324px;
  overflow: hidden;
}


.weathorIcon{
  margin-top: 2rem;
  width: 100px;
  height: 100px;
}
.weathorCity{
  font-size: 35px;
}
.weathorTemp{
  font-size:30px;
  font-weight: 700;
}

@media screen and (max-width:400px) {
  .box{
    position: relative;
   right: 4rem;
  }
}
@media screen and (max-width:375px) {
  .box{
    position: relative;
   right: 6rem;
   overflow-y: hidden;
  }
}
@media screen and (max-width:414px) {
  .box{
    position: relative;
   right: 3rem;
  }
}

  @media screen and (max-width:414px) {
  .box{
    position: relative;
   right: 3rem;
  }
  }



  @media screen and (max-width: 375px) {
    body,html {
        overflow: hidden;
    }
}


What I have tried:

I have tried many ways with media queries by putting different css properties but problem not solved.
Posted
Updated 2-May-23 22:48pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900