Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap layout still an issue on Tablets


Recommended Posts

Posted

Bootstrap has had layout issues on Tablets for some time now and looks to be still a problem in BS4, Site works fine on pc and phone but use an ipad or other tablet and you can run into problems. This is in both landscape and portrait mode, It's worst on 8" -10" tablets from what I have found.

With CE BS3 a simple hack was used to minimise this issue by adding some css.

/* fix tablet mode */

@media (min-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100% !important;
    }
} 
/* fix tablet mode end */

This however is not working with BS4! In order to get CE BS4 to display a bit more responsivly on the same tablet mode it's taken another dirty hack by adding some aditional css. It's taken several media brakes to make it behave but this is not a good solution? Has anyone else found a better way to make BS4 work on tablets?

/* fix tablet mode */
/* 768px */
@media (width: 1024px) {  

#tabletsizefix {
    width:45rem;
} 
}
@media (width: 768px) {  

#tabletsizefix {
    width:45rem;
} 
}
@media (width: 800px) {  

#tabletsizefix {
    width:45rem;
} 
}
/* fix tablet mode end */

image.png.32bd09ddee90b7721fe629f1886d29ec.png

image.thumb.png.8a8a4e137a36099a54900fb20d641f81.png

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...