CODEWITHSUNDEEP
htmlcssreactjsflexboxmedia-queries
AltBrian
AltBrian

Reputation: 2572

Order position not working with media query

Been struggling with this for a while. I want to change an order a div when it is in mobile mode. In other words when the media query is @media only screen and (max-width: 375px) . The div in question is a row of buttons. This is how I want it to look like.Correct image and this is what I have so far

Basically I want the buttons to appear at the button as in the correct example. Whenever, I change things around I either get the mobile version correct but the desktop version is incorrect. Also, just wanted to say that the application is built using React. Below is the code for the html:

<div className={darkMode ? "card-dark-mode" : "card-light-mode" }>

      <NavBarCard handlechange={()=> setDarkMode(prevMode => !prevMode)} moonMode={darkMode ? "moon fas fa-moon" :
        "moon far fa-moon"}
        darkMode={darkMode ? "dark-mode" : "light-mode"}/>
        <div className="detailCard">
          <Link to="/">
          <button className="topButton myButton">
            <i class="fas fa-arrow-left"></i>Back
          </button>
          </Link>
          <div className="container">

            <img className="flag" alt="flag" src={country.flag} />
          <div className="borderName">
            <div className="countryName">

              <div className="NativeName">
                <h1 className="Country">{country.name}</h1>
                <h2>Native Name:</h2>
                <p> {country.nativeName}</p>
                <br />
                <h2>Population:</h2>
                <p> {country.population}</p>
                <br />
                <h2>Region:</h2>
                <p> {country.region}</p>
                <br />
                <h2>Sub Region:</h2>
                <p> {country.subregion}</p>
                <br />
                <h2>Capital:</h2>
                <p> {country.capital}</p>
                <br />
              </div>

            </div>
            <div className="borderCountries">
                  <h2>Border Countries:</h2>{country.borders
                  ? country.borders.map((border) => (
                  <button className="myButton" onClick={()=> {
                    fetchItem(border);
                    history.push(`/DetailCard/${border}`);
                    }}
                    >
                    {border}
                  </button>
                  )):null}
              </div>
            </div>
            <div className="domain">
                <h2>Top Level Domain: </h2>
                <p>{country.topLevelDomain}</p>
                <br />
                <h2>Currencies: </h2>
                <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                <br />
                <h2>Languages: </h2>
                <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                <br />
              </div>
          </div>
        </div>

    </div>

Below is the css:

     .detailCard {
     /* position: relative; */
     padding-top: 50px;
     }
    .Country {
    text-align: justify;
    }

  .card-light-mode {
  background-color: #fff;
  color: #333;
  }

 .card-dark-mode {
 height: 1400px;
 background-color: hsl(207, 26%, 17%);
 color: hsl(0, 0%, 100%);
 /* height: 1400px; */
 }


 h2 {
 padding-right: 15px;
 }

 h2,
 p {
 display: inline-block;
 }

 .container {
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 padding-left: 50px;
 }

.flag {
position: relative;
right: 75px;
border-radius: 2px;
padding: 15px;
width: 500px;
}

.domain {
padding-top: 65px;
}

.myButton {
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 2px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
/* font-family:Arial; */
font-size: 15px;
font-weight: 600;
margin: 4px 4px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}

.myButton:hover {
background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color: #f6f6f6;
}

 .myButton:active {
  position: relative;
  top: 1px;
  }

.topButton {
position: relative;
left: 150px;
 }

@media only screen and (max-width: 375px) {
.container {
 display: flex;
 flex-direction: column;
 width: fit-content;
 }

.borderCountries {
 order: 1;
 }

 .card-dark-mode {
 width: fit-content;
 }

.flag {
display: block;
margin-left: 50px;

}

.topButton {
 position: relative;
 left: 30px;
 bottom: 20px;
 }

.domain {
 padding-top: 30px;
 }
}

The desktop version of the component looks like this: Desktop Version. As you can see the border countries buttons appear underneath the capital. Any help would be appreciated. Apologies if this seems a long winded explanation.

Upvotes: 0

Views: 70

Answers (1)

Atul Rajput
Atul Rajput

Reputation: 4178

I have seen your code and by the current structure it's hard to achieve what you want, but if you can change your HTML structure then it will be very easy, So as I can see you are having a problem with the right side div on desktop and on mobile to order buttons div. here is the solution.

.borderName {
  display: flex;
  flex-wrap: wrap;
}

.borderCountries {
  width: 100%;
  order: 2;
}
.countryName, .domain {
  width: 50%;
}

@media(max-width: 375px){
  .borderName {
    flex-direction: column;
  }
}
<div class="borderName">
                    <div class="countryName">
                        <div className="NativeName">
                            <h1 className="Country">{country.name}</h1>
                            <h2>Native Name:</h2>
                            <p> {country.nativeName}</p>
                            <br />
                            <h2>Population:</h2>
                            <p> {country.population}</p>
                            <br />
                            <h2>Region:</h2>
                            <p> {country.region}</p>
                            <br />
                            <h2>Sub Region:</h2>
                            <p> {country.subregion}</p>
                            <br />
                            <h2>Capital:</h2>
                            <p> {country.capital}</p>
                            <br />
                        </div>
                    </div>
                    <div class="borderCountries">
                        <h2>Border Countries:</h2>{country.borders
                        ? country.borders.map((border) => (
                        <button className="myButton" onClick={()=> {
                            fetchItem(border);
                            history.push(`/DetailCard/${border}`);
                            }}
                            >
                            {border}
                        </button>
                        )):null}
                    </div>
                    <div class="domain">
                      <h2>Top Level Domain: </h2>
                      <p>{country.topLevelDomain}</p>
                      <br />
                      <h2>Currencies: </h2>
                      <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                      <br />
                      <h2>Languages: </h2>
                      <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                      <br />
                    </div>
                </div>

working codepen example is here, in which you can increase and reduce the screen size.

if I am mistaking something, just correct me, I would love to help.

Upvotes: 1

Related Questions