Header bar not extending across the entire width of the screen when viewed on mobile devices

View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes.

I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width when resized. I suspect it may be due to the content below it, but I'm uncertain how to remedy this situation.

Any guidance on this matter would be greatly appreciated. It has been a bit frustrating for me, and I believe it might be a simple fix that I'm overlooking.

Thank you in advance, and I look forward to any suggestions or discussions.

Best regards,

Mike

/* CSS code snippet goes here */
htmlcssbootstrap-4

Answer №1

Your .card-about width might be too wide for your viewport.

Consider using max-width instead. I also adjusted the height to auto to prevent content overflow as the height increases. Here is the adjusted CSS code:

html body {
    font-family: 'Bree Serif', serif;
    /* more CSS styles here */
}

/* Additional CSS styles for other sections */

.card-about {
    /* Existing styles */
    max-width: 400px; /* Using max-width instead of width */
    height: auto; /* Setting height to auto */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unique Title Here</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-XXXX" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-YYYY" crossorigin="anonymous"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">

<body>
    <nav class="navbar navbar-light bg-light navbar-expand-sm" id="navbar-color">
        <!-- Navbar content goes here -->
    </nav>

    <div class="modal" tabindex="-1" id="signUpModal">
        <!-- Modal content goes here -->
    </div>

    <main class="container-fluid">
        <section class="bruna-page">
            <div class="row justify-content-around">
                <div class="col-sm-12 col-md-4"class="bruna-box-1">
                    <!-- Card content here -->
                </div>

                <div class="col-sm-12 col-md-4" class="bruna-box-2">
                    <!-- Updated card-about content goes here -->
                </div>

                <div class="col-sm-12 col-md-4" class="bruna-box-3">
                    Bruna-box-3 Content
                </div>
            </div>
        </section>
    </main>

<footer class="footer fixed container-fluid">
    <!-- Footer content goes here -->
</footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-XXXX" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-XXXX" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-XXXX" crossorigin="anonymous"></script>
</body>
</html>

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

What is the best way to modify the styling of my CSS attributes?

I'm currently working with this CSS code: input:checked + .selectablelabel .check { visibility: hidden; } Now, I want to change the visibility property to "visible" using JavaScript. I attempted the following: $(document).on('click', & ...

javascripthtmlcss

Tables that are not only responsive but also friendly to mobile

For the past week or so, I've been working on finishing up the layout for a single page. While I have managed to get the page somewhat functional, I am in need of assistance with both the original layout and ensuring it is mobile-friendly. The issue w ...

phphtmlcsshtml-table

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

cssvertical-alignment

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

pythonhtmlcssdjango

occupying half of the screen

Having trouble displaying two videos in an ionic grid. My goal is to have both videos take up the entire screen, with each occupying 50% height and 100% width. However, when I try to achieve this, the ion-row only takes up 50% of the screen and the video i ...

htmlcssionic-frameworkhtml5-video

The specified font-size in my CSS is being ignored by Chrome

I'm a beginner in the world of html/css and was tasked with creating a html webpage. I set a specific font-size for my webpage, only to be surprised when my browser (Google Chrome) adjusted it on its own. Even though I specified the font-size as 14px, ...

htmlcssgoogle-chromefont-size

Is it possible for HTML to provide alternative text for unique characters, such as accented characters?

I have a vision for HTML support that may incorporate the following: <span alt="Antonin Dvorak">Anton&iacute;n Dvo&#345;&aacute;k</span> In this scenario, if a browser cannot display special characters, it would default to showing ...

htmlhtml-entities

The background color of the body is being utilized by Div in Internet Explorer version 7

Within my HTML document, I have created a container div that holds several nested divs for a slideshow effect. This "container" div is positioned over the background image of the body element. The CSS styling for the body element is as follows: body { ba ...

csshtmlinternet-explorer-7background-color

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

In Mobile View, I want to swap out my current image for text to keep it hidden

I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using: CSS: @media only screen and (max-width:1024px) { header .logo { display: none; } header .logo a { display: non ...

htmlcssresponsive-design

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

htmlcssflexbox

Dynamic styling with jQuery input focus animation

Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...

jquerycss

Having trouble with my unique 404 page templates not functioning properly in Django

I'm having trouble implementing my custom 404 and 403 error pages for my Django project. I've previously used the same code in other projects, but it's not functioning as expected this time. Here is the function I am using: def error_404(re ...

pythonhtmldjangohttphttp-status-code-404

Show the WooCommerce checkout shipping fields and eliminate the "Choose a different delivery address?" checkbox

Is there a method to eliminate the checkbox labeled "Ship to a different address?" on the woocommerce checkout page while still displaying the shipping fields? I have attempted the following: add_filter( 'woocommerce_cart_needs_shipping_address', ...

phpcsswordpresswoocommercecheckout

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Set the value of a PHP variable with jQuery

i am currently developing a website that includes buttons, each of which triggers a Bootstrap modal containing data from a MySQL database. I am passing a variable from jQuery to execute a MySQL query inside the modal. However, the PHP variable is having tr ...

phpjquerybootstrap-4bootstrap-modal

Utilizing distinct JavaScript, JQuery, or CSS for individual Controllers within the Codeigniter framework

Currently, I am involved in a Codeigniter v3 project where we are developing a comprehensive application for a large organization. To optimize the loading speed of each page, I am looking to integrate custom JQuery and CSS files/code specific to each Con ...

javascriptphpjquerycsscodeigniter

Position the Facebook Like Button in alignment with the counts box

Is it possible to align the Facebook likes count box at the bottom of my Like Button on my website? I'm looking for help with this task. Here is a visual representation of how I want the fb button to be positioned or styled: ...

asp.nethtmlcss

What is the best way to position the sign-in modal form on the top right corner of my website?

Hey there, I'm facing a bit of an issue and can't seem to figure out what went wrong. Recently, I inserted a Bootstrap Sign In modal in my HTML file. Here's the code: <div class="text-center"> <a href="" class ...

htmlcssbootstrap-4layoutfrontend

Adjusting the quantity of buttons in real-time following an ajax request

Creating buttons dynamically in an Ajax success function can be a challenge when the number of buttons varies each time. I am able to create the buttons, but since the exact number is unknown, adding the correct number of button listeners becomes tricky. ...

javascripthtmlajax