CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queriesbootstrap-4
Melvin
Melvin

Reputation: 150

How to use media query for max-width: 767px using Bootstrap 4 mobile first

I am converting a website that I made from scratch to be responsive using Bootstrap 4. I started the conversion before I realized that Bootstrap 4 is mobile first, my site was developed desktop first. Without going back and re-doing the entire site, I thought I could just add a few changes with this media query:

    @media only screen and (max-width: 767px) {
        /***HOMEPAGE - HEADER***/
        #header {
            height: 45vh;
            background-attachment: inherit;
        }
    }

The changes are not shown on the site but I can see the code when I inspect element and click on sources. My other queries are working just fine, they look like this:

    @media (min-width: 768px) and (max-width: 991px) {
        /***BODY ***/
        html,
        body,
        a,
        blockquote {
            font-size: 18px;
        }

        /***MAIN & MOBILE NAV***/
        .main-nav {
            display: none;
        }

        #nav-icon3 {
            display: block;
        }
    }

I tried adding this meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1, 
    maximum-scale=1">

That made everything look jumbled beneath 767px.

I just need to make a few minor tweaks for when the screen is less than 767px and I do not want to re-build my site from mobile first, nor do I want to convert to Bootstrap 3 at this point. Please Help!

Upvotes: 1

Views: 6671

Answers (1)

Znaneswar
Znaneswar

Reputation: 3387

If you are using safari browser use viewport as <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> Safari Documentation

and another reference why shrink-to-fit=no

As per Bootstrap 4 documentation Responsive breakpoints are 

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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

other direction

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

and minimum and maximum breakpoint widths

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

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

Upvotes: 5

Related Questions