CODEWITHSUNDEEP
htmlcssflexbox
Vinnie
Vinnie

Reputation: 1053

Flexbox for mobile issue

I have created a following fiddle.

Fiddle

    <span class="item__collection">
        <button class="item__button">1</button>
        <button class="item__button">2</button>
        <button class="item__button">3</button>
        <button class="item__button">4</button>
        <button class="item__button">5</button>
        <button class="item__button">6</button>
        <button class="item__button">7</button>
        <button class="item__button">8</button>
        <button class="item__button">9</button>
        <button class="item__button">10</button>
    </span>

<style>    
.item__collection {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1024px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 
  Device = Mobiles (Landscape), Tablets, Ipads, Laptops, Desktops
  Screen = from 481px and above
*/
@media (min-width: 481px) {
  .item__collection{
    flex-flow: row wrap;
  }
}

.item__button {
  height: 150px;
  flex: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  border: 1px dotted gainsboro;
  cursor: pointer;
  background: transparent;
  border-radius: 3px;
}
.item__button:focus {
  border: none;
  outline: none;
}

.item__button:hover {
  border: none;
  background: gainsboro;
}

/*
  Device = Laptops, Desktops
  Screen = from 1025px to higher resolution desktops
*/
@media (min-width: 1025px) {
  .item__button {  
    flex: 33%;   
  }
}

/* 
  Device = Mobiles (Landscape), Tablets, Ipads 
  Screen = from 481px to 1024px
*/
@media (min-width: 481px) and (max-width: 1024px) {
  .item__button {
    flex: 49%;   
  }
}
</style>

I have a constraint that on mobile devices the grid will display 1 number per row. On tablet devices 2 numbers per row and on desktop and larger devices 3 numbers per row. it's up to you how you define ‘mobile’, as long as it’s sensible.

Above fiddle works correctly on mobile and tablet - but on mobile devices, it displays 2 numbers per row.

Any help is much appreciated

Upvotes: 0

Views: 40

Answers (1)

Elman Huseynov
Elman Huseynov

Reputation: 1147

You need to add meta tag in your head in order mobile media query works: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }


        .item__collection {
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          max-width: 1024px;
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }



        .item__button {
          height: 150px;
          flex: 100%;
          margin-top: 2px;
          margin-bottom: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 4em;
          border: 1px dotted gainsboro;
          cursor: pointer;
          background: transparent;
          border-radius: 3px;
        }
        .item__button:focus {
          border: none;
          outline: none;
        }

        .item__button:hover {
          border: none;
          background: gainsboro;
        }

        @media screen and (min-width: 481px) {
          .item__collection{
            flex-flow: row wrap;
          }
        }

        @media screen and (min-width: 1025px) {
          .item__button {  
            flex: 33%;   
          }
        }


        @media screen and (min-width: 768px) and (max-width: 1024px) {
          .item__button {
            flex: 49%;   
          }
        }


        @media screen and (max-width: 767px) {
          .item__button {
            flex: 100%;   
          }
        }
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Document</title>

</head>
<body>

<span class="item__collection">
    <button class="item__button">1</button>
    <button class="item__button">2</button>
    <button class="item__button">3</button>
    <button class="item__button">4</button>
    <button class="item__button">5</button>
    <button class="item__button">6</button>
    <button class="item__button">7</button>
    <button class="item__button">8</button>
    <button class="item__button">9</button>
    <button class="item__button">10</button>
</span>

Upvotes: 1

Related Questions