Bootstrap is unresponsive in tablet

Question

My website works on all devices except for tablets. I am using bootstrap 4, and below I have attached the media query for the responsive design.

@media (max-width: 1024px) {
  div#about {
    width: 100% !important;
    margin-left: 0px !important;
  }
}

@media (max-width: 1024px) {
  div#about img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: auto !important;
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 1024px) {
  div#about-section img {
    margin-bottom: 50px !important;
    width: 100% !important;
  }
}

I would advise against creating your own breakpoints if you are using bootstrap. Use their breakpoints to create a consistent behaviour of your site. — cloned, Aug 04 '20 at 13:52

score 2 · Answer 1 · answered Aug 04 '20 at 02:06

2

You should use min-width, not max-width. I guess the resolution of your tablet is just higher than 1024px, therefore it doesn't apply to the tablet. Since you use Bootstrap, you should make use of Bootstrap breakpoints in Sass. This makes your layout consistent with the rest of Bootstrap. They also don't use screen as well. Otherwise, there is a stackoverflow question about this issue as well.

answered Aug 04 '20 at 02:06

Citrullin

2,269
14
29

The website also breaks at 793px. shown here: https://gyazo.com/a424390c74618193a2c7be7f3f598f0d – zak gomes Aug 04 '20 at 02:45

score 0 · Answer 2 · answered Aug 04 '20 at 12:14

You have to use min-width, but you can't only target 1024px only because of tablets with different screen sizes.

@media only screen and (min-width: 1024px) {
  div#about img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: auto !important;
      margin-bottom: 10px !important;
  }

}

@media only screen and (min-width: 1024px) {
  div#about-section img {
      margin-bottom: 50px !important;
      width: 100% !important;
  }
}

Recommended screen sizes and media queries for the better experience .

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 
}

Bootstrap is unresponsive in tablet

2 Answers2