The container-fluid class expands to full width of the page, except for the navbar

Hey there, looking for some help with your CSS design? Let's take a look at your code snippet:


                .container-fluid-1 {
                    padding: 0;
                }

                .navbar {
                    padding: 0 5%;
                }

                /* More CSS styles here */

            
        

It seems like you're struggling with getting your container to stretch the full width on mobile devices. Don't worry, you're not alone. Here are some screenshots to help illustrate the issue:

Here is how it looks on a laptop - exactly what you want.

Here is how it looks on an iPhoneX - the grey background shifting to the left.

Need some assistance troubleshooting this problem? Feel free to reach out for further guidance. Happy coding!

*Note: container-fluid-1 is a CSS class used in the code snippet.

Answer №1

    <body>

  <!--navbar -->
  <div class="container-fluid-1 container-fluid">
    <section id="title">

      <div class="navbar-section">
        <nav class="navbar navbar-expand-lg">
          <a class=" navbar-brand" href="#">M</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
              <i class="fas fa-bars"></i>
            </span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

            <ul class="navbar-nav ms-auto">
              <li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
              <li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
              <li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
              <li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
            </ul>
          </div>
        </nav>

      </div>

      <!--title -->
      <div class="introduction row">
       <!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
 <div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
          <h1>I'm Marcus</h1>
          <p class="subtitle">Web Design& Front End Developer</p>
          <br>
          <a href="#" class="btn btn-lg col-lg-6 col-md-6">Hire me</a>

        </div>

        <div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
          <img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
        </div>
      </div>

    </section>
  </div>
</body>

<!-- begin snippet: js hide: false console: true babel: false -->

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

Adjust the size of the embedded iframe to match the dimensions of the containing div

Is there a method to resize the iframe embed code for a vine so that it fits within the boundaries of the enclosing div? The supplied embed code already includes sizing information as shown below: <iframe src="https://vine.co/v/iMJzrThFhDL/embed/simp ...

Navigating pinch to zoom: Strategies for managing varying page locations

I've been using a combination of JS and CSS to position images within the viewport in a way that allows them to scale and translate accurately to fill the space. For the most part, this method works smoothly and is also able to handle browser zoom fu ...

Displaying Data in a Table

In my current setup, I have a table that receives data from a form through JavaScript. The code is as follows: <div class="row"> <div class="span*"> <table id="production" class="table table-bordered" style="margin:10px auto;bor ...

Align the outer margin to auto without aligning the justify content center outer

Unable to center outer div when using justify-content:flex-start and margin 0 auto Attempted to align content starting from the left in each row with justify-content:flex-start for items and the outer div horizontally centered to position the container in ...

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

Suggestions for incrementing a button's ID every time it is clicked

I am working on a button functionality that increases the button id when clicked. Below is the HTML code for the button: <input type="button" id="repeataddon-1" name="repeataddon" class="repeataddon" value="add" > Accompanied by the following scr ...

Ways to present a pop-up dialog box featuring word corrections

I have developed a word correction extension that encloses the incorrect word in a span element. Upon hovering over the word, a drop-down menu with possible corrections should be displayed. However, my current code is not functioning properly. How can I en ...

Is CDATA insertion automatic in JavaScript within Yii framework?

Currently I am working with Yii and have noticed that whenever I insert any JavaScript code, it is automatically encapsulated in CDATA. I am curious as to why this is happening. Will there be any issues if I were to remove the CDATA tags, considering that ...

Using embedded js files in jQuery's .load() function does not function properly

In the index.html file, I have the code snippet below: <div id="page-insert"></div> function openPage(pageid) { $('#page-insert').load(pageid); } openPage('testpage.html'); Additionally, there are script files embedde ...

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

Maintaining the layout of blank lines in HTML content within JEditorPane

It has come to my attention that in an HTML JEditorPane, when there is an empty line, any previously applied styling disappears. Take a look at the code snippet below: import javax.swing.JEditorPane; import javax.swing.JFrame; import javax.swing.SwingUtil ...

Using jQuery to implement conditional logic in HTML

Is there a way to exclude tags/variables in a jQuery HTML method? For example, if the company field is empty, it should not appear in the HTML. $('.modal-body').html(` <p><span style="font-weight:bold;">Name:< ...

Content Security Policy directive violation: Chrome extension policy error occured due to refusal to execute inline event handler

I've been working on a chrome extension to perform a simple task, but I've hit a roadblock with one line of HTML code that's causing issues with setting the correct permissions. Despite my efforts, I'm stuck on what exactly needs to be ...

Embed SQL parameter into HTML code

Every 24 hours, I have a SQL job that sends an email containing data extracted from my database tables. I store the data in : DECLARE @ReportContentBuilder table(LineSequence int identity, Line varchar(2000)) Here's how it's done : INSERT IN ...

Tips for customizing the color of the select drop down arrow component:

Is there a way to change the color of the select drop down box arrow part? It needs to be compatible with IE9, Firefox, and other browsers. Currently, the drop down box looks like this: I would like the arrow part to have this appearance: I believe this ...

CSS: Set the left position to 250px with the added feature of hiding any overflow

I am currently working on a sidebar that can be shown or hidden using JavaScript with CSS animations. To achieve this effect, I need to position the content div (#main) using left: 250px;. #main { left: 250px; position: relative; overflow: hidden; } ...

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...