1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Responsive Issue?

Ollie Vincent pro asked 6 years ago

Hi, I have just discovered and started using Bootstrap, so I downloaded the free version (for now) as a test. I created a dummy site, and it all works perfectly except the responsiveness (see images below). On the mobile devices I have tested, all the content shrinks which is not what I want - I want it move smoothly into one column. I am using the code provided by Bootstrap which is: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Any Ideas? Thanks This is how it looks: This is how it looks on my phone (image link) This is how it should look: This is how it should look on my phone (image link)

Marta Wierzbicka staff answered 6 years ago

Hi, that's great. Best, Marta

Ollie Vincent pro answered 6 years ago

Cheers Folks, I see what the problem is now. It is what Xardonik suggested :) All I need to do now is solve it. Thanks

Marta Wierzbicka staff answered 6 years ago

On your website you don't have this tag: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> add this and check it it corrct now.

Ollie Vincent pro answered 6 years ago

Oh! Oops I see the tags now... This site was about 10 yrs old before I started using it again... Any idea where the tags might be? Cheers

xardonik free answered 6 years ago

Hmm why is your side inside these tags? http://prntscr.com/fpjvvz If I open page from frame tag everything works fine: http://s239735752.websitehome.co.uk/DadDIY/home1/

Ollie Vincent pro answered 6 years ago

Hi, Sure - its on a old dev url that I just happened to have free... Click here for my site Knock yourself out :) Thanks

xardonik free answered 6 years ago

Hi, can you share us link to your page? Better is working with real code, not only head and images of your page

Ollie Vincent pro answered 6 years ago

Hi, Thanks for the code, but my site responds just like the code you provided. I was hoping to get everything moving into 1 column on mobile devices rather than everything shrinking in size - please see images in my first post. (right click and view in new tab) Thanks

Marta Wierzbicka staff answered 6 years ago

Hi, compare your html code with this one below and try to find what was wrong. The code below is responsive on mobile devices: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <!--Main Navigation-->
    <header>
        
        <!--Navbar-->
        <nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <strong>Navbar</strong>
                </a>
                <div class="collapse navbar-collapse" id="navbarNav1">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">Pricing</a>
                        </li>
                        <li class="nav-item dropdown btn-group">
                            <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
                                <a class="dropdown-item">Action</a>
                                <a class="dropdown-item">Another action</a>
                                <a class="dropdown-item">Something else here</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline waves-effect waves-light">
                        <input class="form-control" type="text" placeholder="Search">
                    </form>
                </div>
            </div>
        </nav>
    
    </header>
    <!--Main Navigation-->
    
    <!--Main Layout-->
    <main>
    
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    
                    <!--Carousel Wrapper-->
                    <div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
                        <!--Indicators-->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-1z" data-slide-to="1"></li>
                            <li data-target="#carousel-example-1z" data-slide-to="2"></li>
                        </ol>
                        <!--/.Indicators-->
                        <!-- Slides -->
                        <div class="carousel-inner" role="listbox">
                            <!-- First slide -->
                            <div class="carousel-item active">
                                <!-- Mask color -->
                                <div class="view hm-black-light">
                                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2839%29.jpg" class="img-fluid" alt="">
                                    <div class="full-bg-img">
                                    </div>
                                </div>
                            </div>
                            <!--/ First slide -->

                            <!-- Second slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view hm-black-light">
                                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2837%29.jpg" class="img-fluid" alt="">
                                    <div class="full-bg-img">
                                    </div>
                                </div>
                            </div>
                            <!--/ Second slide -->

                            <!-- Third slide -->
                            <div class="carousel-item">
                                <!-- Mask color -->
                                <div class="view hm-black-light">
                                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2841%29.jpg" class="img-fluid" alt="">
                                    <div class="full-bg-img">
                                    </div>
                                </div>
                            </div>
                            <!--/ Third slide -->
                        </div>
                        <!--/ Slides -->
                        <!--Controls-->
                        <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                        <!--/.Controls-->
                    </div>
                    <!--/.Carousel Wrapper-->

                </div>
            </div>

            <!--Grid row-->
            <div class="row mt-3">
            
                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->
            
                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
            
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
            
                </div>
                <!--Grid column-->
            
            </div>
            <!--Grid row-->

            <div class="row my-3">
                <div class="col-md-12">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at.</p>
                </div>
            </div>

            <div class="row my-3">
            
                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->
            
                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
            
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4">
            
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Button</a>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
            
                </div>
                <!--Grid column-->
            
            </div>
            <!--Grid row-->
        </div>
    
    </main>
    <!--Main Layout-->
    
    <!--Footer-->
    <footer>
    
    
    
    </footer>
    <!--Footer-->

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
</body>

</html>
Best, Marta

Ollie Vincent pro answered 6 years ago

Nope - I'm stuck... I'm on android, but it is the same on iOS, I checked.

xardonik free answered 6 years ago

Maybe on your mobile device you've checked option "page for PC"

Ollie Vincent pro answered 6 years ago

Hi, Nope still doesn't work - I am baffled. My header code: <html lang="en"> <head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Home 1 ¦¦ Ollie Vincent</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head>

xardonik free answered 6 years ago

Hi, oh yes you're right, sorry i didn't check this. Please check this meta: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ollie Vincent pro answered 6 years ago

Hi, Right click on the Image and open in new tab... you should see them.

xardonik free answered 6 years ago

Your images are broken
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Ollie Vincent
Pro User 148Support score
6Questions 119Answers 0Snippets