While attempting to make my div responsive, it unexpectedly became stuck to the navbar

After successfully creating a website that works fine on desktop, I encountered an issue when viewing it on my phone. The main content section, which features jokes, gets scrolled up along with the navbar. I followed a tutorial on YouTube to make the navbar responsive, and while it now adapts well to different screen sizes, it affects the scrolling behavior of the main content. I am looking for a solution where the main container stays fixed in place between the navbar and does not get affected by its movements. If anyone has a solution to this problem, please help me out.
Code:

let jokes = [`
        // List of jokes here...
`,
    ];
    let index = Math.floor(Math.random() * jokes.length - 1);
    jk.innerHTML = jokes[index];
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

        /* CSS styling here... */

<!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>Exercise 3</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dac6d8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>

    <nav class="navbar navbar-expand-lg bg-light">
        <!-- Navbar code here -->
    </nav>

    <div class="container">
        <h3>Dark Jokes</h3>
        <div class="box" id="jk">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fbe7f9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
</body>
</html>

javascripthtmlcss

Answer №1

Do you think this excerpt serves as your response?

let jokes = [`I just got my doctor's test results and I'm really upset about it. Turns out, I'm not gonna be a doctor.`, ...

        `. Why did Mozart kill all of his chickens? When he asked them who the best composer was, they all replied, "Bach, Bach, Bach."`,

        `. How many emo kids does it take to screw in a lightbulb? None, they all sit in the dark and cry.`,
        
        `...`;

    let index = Math.floor(Math.random() * jokes.length - 1);
    jk.innerHTML = jokes[index]
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

        html, body{
            font-family: 'Poppins';
            font-size: 15px;
            line-height: 1.5;
            box-sizing: border-box;
            margin: 0;
            overflow-x: hidden;
            top: 0;
            left: 0;
        }
        
        ...
      
</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 eliminate alternative styling from a chart component in C#.NET?

I've encountered an issue with a stacked chart component on a c#.net webform from the MS Chart Control Library. Initially, I dragged the control onto the design surface and then proceeded to edit the source html (.aspx page) to assign the element a cs ...

asp.netcss

I am having success posting data through a form, however, the fetch API is not functioning as expected for me

Currently, I am working on a React Project and focusing on creating a signup form. Everything seems to be fine when posting form data using the Form, but things get stuck when I try to use onSubmit={handleSubmit} along with fetch APIs such as axios or just ...

javascriptnode.jsreactjsexpressaxios

Issue encountered in the file located at ./node_modules/framer-motion/dist/es... where the export 'useId' (imported as 'useId') could not be located in 'react' along with 'useInsertionEffect'

After adding the framer-motion library using yarn add framer-motion, I encountered the following configuration: https://i.sstatic.net/rG2FJ.png Error message : ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 40:13- ...

javascriptreactjsupgradehadoop-yarnframer-motion

Express: fetch not capable of setting cookie

I am implementing a cookie setting feature with Express, using the code snippet below: app.use(require('cookie-parser')()); app.get('/a', function (req, res) { console.log(req.cookies); res.cookie('aaa', 'bbb&apo ...

javascriptajaxnode.jsexpresscookies

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

I need to blur multiple elements on my website when I hover over them, leaving only the hovered element in focus. Is there a more efficient way to achieve this? Currently, I have the following code: $(function() { $('#a').hover(function() { ...

javascriptjqueryhtmlhoveraddclass

Vue snapshot testing is encountering a failure with the error message "TypeError: Cannot read property of undefined"

Everything seems to be working fine with the component on the page without any errors. Storybook is also functioning well, but the problem lies in the unit test. import { mount } from '../../vue'; import { createLocalVue } from '@vue/test-u ...

javascriptvue.jsjestjs

Conceal a Component within an Embedded Frame

Hey there! I've been attempting to hide a header within an iframe, but it seems like my code isn't doing the trick. Could someone take a look and help me diagnose why the header is still visible? Thanks in advance! <iframe id="booking_iframe" ...

javascriptjqueryhtmlcssiframe

Codeigniter Autocomplete Feature with Ajax - Page Not Found Error

I am currently facing an issue while porting a working php application with AutoSuggest JS to CodeIgniter. My expertise in CI is not very strong which is why I ventured into this task. The problem lies in the fact that it is not functioning as expected. Be ...

javascriptphpjqueryajaxcodeigniter

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

javascripthtmlangular

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

htmlcssreactjsbootstrap-4bootstrap-multiselect

Extracting JavaScript content with Selenium using Python

I am currently facing a challenge of scraping JavaScript data from a website. Specifically, I am trying to extract the number of Followers from this particular website. Here is the code I have come up with so far: import os from selenium import webdriver ...

javascriptpythonselenium

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

htmlcss

Node - What could be causing my gif to run at a slower pace while utilizing GifEncoder?

I am encountering an issue with rendering a Gif using the GifEncoder library (specifically, an older version). The output gif is much slower and appears to lag. Below is the code I have been using: import GIFEncoder from "gif-encoder-2"; import f ...

javascriptnode.jsgifanimated-gif

styling a flex container with aligned text and buttons

I'm attempting to align text on the left and button controls on the right within a display: flex div. <CustomFieldContainer> <StyledWellContainer> <FieldDetails key={id}> <H4 bold>{label}</H4> <Styled ...

cssreactjs

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

javascripthtmlcssfetch-api

A guide on using Sinon to mock a custom $http transform

Exploring the proper method for mocking an http post with a custom transform in Angular using the Sinon mocking framework. In my CoffeeScript Sinon unit test setup, I define mocks like this: beforeEach module(($provide) -> mockHttp = {} $provide.value ...

javascriptangularjsunit-testingcoffeescriptsinon

How can I incorporate a dropdown menu into my website's navigation using Bootstrap 4 alpha?

This content is based on the Bootstrap v4 Alpha blog theme. I integrated it into a project but encountered issues when trying to add a dropdown menu to the navigation bar. Despite my attempts, the dropdowns did not appear as expected. I included the code ...

htmlcssbootstrap-4

creating a list of checkboxes with v-for in Vue.js

Having a bit of trouble with CheckBox selection. I am looping through a DataTable and adding CheckBox to it, storing them as an Array. My goal is to have the functionality where selecting the left checkbox removes the right one, and vice versa for the ri ...

javascriptvue.jsvuexbootstrap-5

Can the w regular expression pattern be modified to include special characters like é? If not, what other options are available?

Imagine having a regular expression that appears as follows: \w+ In this case, the string "helloworld" would be accepted: helloworld However, "héllowörld" would not pass the test: héllowörld The regex will stop at é (and also break atö) ev ...

javascriptregex