Separate the webpage into distinct sections for effective web design

I'm attempting to create a collapsible sidebar for mobile phones. However, after the first three images, the subsequent images on the next line appear below the sidebar instead of beside it.

The top part looks fine, but as I scroll down to view the other images, they fail to align themselves next to the sidebar. The output is as follows:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/<a href="/preload/l/email-protection" class="__cf_email__" data-cfemail="681a17170c0b080e0d3d28232d232c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
  <div class="row mt-5">
    <div class="col-3 vertical-test">
      <nav class="navbar navbar-expand-lg navbar-light">
        <!-- <div class="container-fluid"> -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav flex-column p-2">
            <li class="nav-item">
              <a class="navbar-brand active" href="#">DIABLO DAILY</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">NEW ITEMS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BRANDS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
          </ul>
        </div>
        <!-- </div> -->
      </nav>
    </div>



    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>


    <!-- for the next line -->
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>




    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/preload/l/email-protection" class="__cf_email__" data-cfemail="897b7676898e89977e61637e706f6077414560">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Here is the revised solution...

The suggestion provided in the previous comment recommends placing the sidebar in one column and moving the rest of the content to the adjacent column. I made some adjustments to your code (such as changing col-3 to col-4) to ensure that the output matches what you posted while also resolving the issue at hand.

Please refer to the snippet below for the updated arrangement.

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aeccc1c1dadddadccfdeee9b809f809f">[email protected]</a>/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332c332c">[email protected]</a>/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid'>
    <div class='row mt-5'>
      <div class='col-3 vertical-test'>
        <nav class='navbar navbar-expand-lg navbar-light'>
          <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
              <span class='navbar-toggler-icon'></span>
            </button>
          <div class='collapse navbar-collapse' id='navbarNav'>
            <ul class='navbar-nav flex-column p-2'>
              <li class='nav-item'>
                <a class='navbar-brand active' href='#'>DIABLO DAILY</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>NEW ITEMS</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>BRANDS</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <div class='col-9'>
        <div class='row mb-5'>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
        </div>

        <div class='row'>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
        </div>
      </div>
    </div>
  </div>

</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

Encountering issues loading background image with Reactjs and Webpack

I've encountered an issue while trying to load a background image in my React project from a custom CSS file. I am currently using Webpack 4. .bgimage { height: 100vh; background: url('../images/header.jpg'); } Unfortunately, the image ...

cssreactjswebpack

Positioning the horizontal menu and footer links to the right side of the page

Struggling to get my menu and footer links aligned all the way to the right of the page. Here's what it currently looks like http://prntscr.com/32snbr, and this is the desired alignment http://prntscr.com/32snrm I've shared the HTML code below, ...

csshtmlhtml-listsfooter

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

Guidance on Configuring Django Static Files

For setting up my Django static files, I added the following code to settings.py: STATIC_URL = '/static/' STATIC_DIRS = [ os.path.join(BASE_DIR, 'static') ] STATIC_ROOT = os.path.join(BASE_DIR, 'assets') To implement this ...

pythoncssdjangodjango-staticfiles

Add the value of JQuery to an input field rather than a select option

Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...

htmljquery

How to vertically align radio buttons with varying label lengths using Angular and Bootstrap 4?

Is there a way to properly align radio buttons with variable length labels? When each label has a different length, the radio buttons appear misaligned. How can this be fixed? <div class="row"> <div class="form-check form-check-inline" *ngFor="l ...

htmlangularbootstrap-4

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

What causes the layout of an application to become distorted when I extend the theme in Tailwind.css?

I had the idea of incorporating an animation into my website design using tailwind.css for styling. module.exports = { content: ["./index.html", "./src/**/*.{js,jsx}"], theme: { colors: { primary: "#E51114", ...

cssreactjscss-animationstailwind-css

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

javascriptjqueryhtmlcsstoggle

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across: Adding a query string in the link src: /mstylesheet.css?cache_buster=12345 Changing the filename each time: /mstylesheet-12345.css Using Apache with Cache-Control "must-revali ...

javascripthtmlcssbrowser-cache

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

javascriptjqueryhtmlhtml-tableincrement

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

javascriptphpcssmysqlhtml-table

I'm having trouble with my code - I suspect the issue might be related to the header() function

When I execute the following code, it resets the form and keeps me on the same page. I am aiming for it to redirect to home.php after a successful login. I believe there is an issue with my header() I have experimented with different approaches and have ...

phphtmlmysql

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

Continuous Playback of Sound

Is there a way to autoplay an audio in loop without being blocked by browsers? Code : <audio id="audio1" src="assest/sound/1.mp3" autoplay="" /> <script> a = document.getElementById('audio1&apo ...

javascriptphphtmljquerycss

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

I have been attempting to achieve this desired outcome. However, my efforts to reproduce it resulted in the check marks being rendered at a smaller size than intended due to using an SVG file. An example of this issue can be seen in the following image: I ...

javascripthtmlcsscss-selectorshtml5-canvas

Creating a Multi-Step Checkout System for a WooCommerce Store

Struggling to make my code work - it just won't fire up. I suspect there might be a version-related issue that I'm overlooking. I'm currently using the default checkout setup from the WooCommerce plugin. Instead of buttons, text is showing ...

phphtmljquerywordpresswoocommerce

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

Creating a Select Directory feature with React - A Step-by-Step Guide

I am in need of uploading all files from a folder to the server. I have been attempting to use a Select Directory window instead of selecting individual files. The standard method: <input type="file" webkitdirectory directory/> has not worked for ...

htmlreactjsfolderbrowserdialog

Tips for preventing H1 from taking up the entire div

I'm currently working on developing a new theme for my WordPress website. One issue I've encountered is that the h1 element is causing the top menu to appear below it instead of on the same line. Can anyone help me overcome this challenge? Here& ...

phphtmlcsswordpress-theming