Mobile site designed using Bootstrap 4 transforms seamlessly into a desktop-like experience

After successfully building a website using bootstrap 4 and testing it on my computer, I encountered an issue when loading the same page on my mobile device:

https://i.sstatic.net/M5J3J.jpg

The layout seems to display as if for a desktop screen rather than adjusting for the mobile view. I have included the necessary meta tag in the header to support mobile devices:

<meta name="viewport" contain="width=device-width, initial-scale=1.0">
. However, the problem persists, and I am unsure why!

Here is the code from my <head> section:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="stylesheet" href="/css/master.css" type="text/css">
    @yield('css_includes')

    <meta name="viewport" contain="width=device-width, initial-scale=1.0">
</head>
<body>
    @yield('navbar')

    <div class="container-fluid h-100">
        @yield('content')
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    @yield('page_scripts')
    @stack('extra_scripts')
</body>
</html>

This is the code snippet for the navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Order Happy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_content" aria-controls="navbar_content" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbar_content">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item {{ request()->is($business->business_slug) ? 'active' : '' }}">
            <a class="nav-link" href="/{{ $business->business_slug }}">{{ $business->name }}</a>
        </li>
        <li class="nav-item {{ request()->is($business->business_slug . "/basket") ? 'active' : '' }}">
            <a class="nav-link" href="/{{ $business->business_slug }}/basket">Basket <span class="badge badge-light">{{ $basket_quantity }}</span></a>
        </li>
    </ul>
</div>
</nav>

Answer №1

According to Bootstrap's guidelines, it is strongly recommended to include the following 3 meta tags within the <head> section when utilizing Bootstrap.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Make sure to incorporate all of these tags. Additionally, don't forget to test in your mobile browser for the option allowing you to view the 'desktop website'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery UI to create a bouncing effect on a CSS sprite image

Want to give your social icons a bounce effect using jQuery UI Bounce? I'm following a template and some jQuery documentation, but having trouble getting it right. It seems like the sprite image for the icons might be causing the issue. Can someone h ...

Sharing variables between server.js files - a step-by-step guide

I am currently in the process of creating a sleek weather webpage. I have successfully retrieved weather data from the Open Weather API through a Node.js server file. However, I have encountered an issue where I am unable to pass a variable, such as tempe ...

Looking for assistance with arranging Divs in HTML?

Having trouble getting my colored div boxes aligned side by side. The lower two divs seem to be overlapping with the yellow div on top of the blue one. How can I fix this and get them to line up like the green and red divs? Could it be an issue with how I& ...

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

What is the CSS technique for applying a gradient background color to an HTML element from the bottom to the top?

I have successfully achieved the desired result from top to bottom using the code snippet below: /* I want to fill with a solid color, but in order to partially fill the background, I found that I needed to use a dummy gradient to achieve the desired ef ...

Slide down when hovering outside of a table row

Here is the code snippet that I have: <!DOCTYPE HTML> <html> <head> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); </script> </head> <body ...

What could be causing the issue with this jQuery selector for the parent form element?

I created a form that connects a button with an attribute, but it's not hiding the parent("form"). However, when I try this, it works. $($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDe ...

Exchange CSS Styles with a Single Click Event in JavaScript

Struggling with getting a click event to function properly on my webpage. I have a Div labeled 'icon' with the class 'lock', and I aim to allow users to click on the background image of this Div to switch its class from 'lock' ...

Is it possible to modify this to only submit a single answer instead of the entire form in Rails 3 with jQuery and Ajax?

Gratitude goes out to those who guided me through a diagnostic process here. I have updated my code in hopes that it will remain functional across future versions of jQuery. However, there are two concerns on my mind: Have I inadvertently written someth ...

Is there a way to retrieve JSON data with form.submit()?

Greetings, I have successfully submitted a form from jQuery using the following code: $('#form').submit(); The form is successfully submitted to the server. However, I am looking to return JSON data from the post request so that I can dynami ...

Implementing standard Header and Footer elements in Vue.js single-page applications

I'm currently working on a VueJS project for a spa. I've already created common components for the Header and Footer, and now I want to include them in the main App.vue file. Here is the structure of my code: https://i.sstatic.net/qdLam.png Le ...

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

<html> <script type="text/javascript"> var map = null; jQuery(function($) { L.marker([50.065407, 19.945104], {title: 'Cat'}) .bindPopup('<h3>Cat</h3> ...

Node.JS AJAX request with no data payload

Encountering an issue where no data is being received on the server side from an AJAX request because the req.body is empty (console logs it as {}). script.js: $("#button").click(function(){ var number = $("#number").val(); $.ajax({ ...

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

Looking to disable the row highlighting once a new row is selected?

Is there a way to remove the row highlight when clicking on another table row? Currently, I'm encountering an issue where the table row remains highlighted even after clicking on a different row or gear icon. Does anyone have suggestions on how to ad ...

A duo creating art on a shared canvas

I have encountered an issue while developing a real-time paint app using HTML5 canvas. Everything works fine when a single user is drawing on the canvas, but problems arise when two users try to draw simultaneously. For example, if one user changes the col ...

In Laravel Blade, you can dynamically add rows and columns based on a certain condition

I'm working on creating a user interface for cinema seats in Laravel Blade. The database includes seat rows and columns, and the rows will be the same for two consecutive rows. For example, the first row could have an id of 1 with seat_row:1 and seat_ ...

Is it possible to Maintain a Constant Pixel Font Size while Allowing for Responsive Text Size?

When viewing a site like the mobile version of , I noticed that the text size adjusts responsively, but the active font-size remains constant at 34px. To see how this works on different screen sizes, check out this comparison. Even when changing the wind ...

Having difficulty choosing a video

I am having trouble muting or unmuting my video. Initially, I am unable to select the video at all. I have tried following tutorial examples and similar questions, but they all suggest the same approach to selecting the video. Can someone please advise m ...

What is the best way to align the icon in the middle of these social buttons?

I'm struggling to center the font awesome icons both vertically and horizontally within their rounded background. Every time, they end up on the left, top, or bottom. Is there a way to adjust the positioning of these icons and properly center them? ...