Having a CSS issue - attempting to display two code blocks with numbers on the sides next to each other, then stack them after a certain screen size. However, there seems to be an error occurring when the screen size is smaller.
I'm open to making any necessary changes to fix this, especially in regards to the media query styling
https://i.sstatic.net/98pYN.png
Below is the code that I am currently using:
You can view my code live on LiveWeave here:
Any ideas on how to troubleshoot this issue?
Have a go at converting to flexbox. It may require some tweaking.
body {
background: #24292e;
box-sizing: border-box;
padding: 20px 20px;
margin: 0px;
font-family: 'Poppins', sans-serif;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #1f252a;
}
::-webkit-scrollbar-thumb {
background: #404c58;
border-radius: 8px;
}
main {
display: flex;
flex-direction: column;
}
.code-box {
display: flex;
}
.box {
margin-top: -7px!important;
color: #b0b7be;
}
.code-lines {
padding: 0px;
margin: 0px;
width: 30px;
border: 0px;
outline: none;
font-size: 13px;
overflow: inherit;
}
/* Add media query here */
@media screen and (min-width: 1060px) {
main {
flex-direction: row;
}
}<main>
<div class="code-box">
<div class="code-lines">1 <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br>8 <br>9 <br>10 <br>11 <br>12 <br>13 <br>14 <br>15 <br>16 <br>17 <br>18 <br>19 <br>20 <br></div>
<pre class="box hljs"><code id="submitCode">app.get(['/c/:documentIdOne/:documentIdTwo', '/compare/:documentIdOne/:documentIdTwo'], (req, res) => {
const documentOne = req.params.documentIdOne;
const documentTwo = req.params.documentIdTwo;
try {
fs.readFile(`./pastes/${documentOne}.txt`, 'utf-8', (err, documentOne) => {
if (err) return res.render('error.ejs', { error: 'One or more posts are not found!' });
fs.readFile(`./pastes/${documentTwo}.txt`, 'utf-8', (err, documentTwo) => {
if (err) return res.render('error.ejs', { error: 'One or more posts are not found!' });
if (documentTwo && documentOne) {
console.log(documentTwo);
console.log(documentOne);
res.render('compare.ejs', { documentOne: documentOne, documentTwo: documentTwo })
}
})
})
} catch (err) {
console.log(err);
res.render('error.ejs', { error: 'An error occured!' });
}
})</code></pre>
</div>
<div class="code-box">
<div class="code-lines">1 <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br>8 <br>9 <br>10 <br>11 <br>12 <br>13 <br>14 <br>15 <br>16 <br>17 <br>18 <br>19 <br>20 <br></div>
<pre class="box hljs"><code id="submitCode">app.get(['/c/:documentIdOne/:documentIdTwo', '/compare/:documentIdOne/:documentIdTwo'], (req, res) => {
const documentOne = req.params.documentIdOne;
const documentTwo = req.params.documentIdTwo;
try {
fs.readFile(`./pastes/${documentOne}.txt`, 'utf-8', (err, documentOne) => {
if (err) return res.render('error.ejs', { error: 'One or more posts are not found!' });
fs.readFile(`./pastes/${documentTwo}.txt`, 'utf-8', (err, documentTwo) => {
if (err) return res.render('error.ejs', { error: 'One or more posts are not found!' });
if (documentTwo && documentOne) {
console.log(documentTwo);
console.log(documentOne);
res.render('compare.ejs', { documentOne: documentOne, documentTwo: documentTwo })
}
})
})
} catch (err) {
console.log(err);
res.render('error.ejs', { error: 'An error occured!' });
}
})</code></pre>
</div>
</main>I have created this HTML page, but I am facing an issue where the hyperlinked sections overlap with the static header when clicked on. I want all linked sections to appear below the header and each section to have different dimensions within the iframe. I ...
I've been working on a rock, paper, scissors game in JavaScript and I'm struggling to get the wins and losses to register correctly. The game keeps resulting in a draw even though I've checked my code multiple times. It's frustrating be ...
Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...
After attempting to import through the entry file (main.js)... import Vue from 'vue' import App from '@/App' import router from '@/router/router' import store from '@/store/store' import BootstrapVue from 'boot ...
First of all, I would like to apologize for my poor English. Attending a French school didn't provide much opportunity to practice other languages. I have a header.html on my website that I am unable to modify because it is not owned by me. However, ...
I have been attempting to implement the color-calendar plugin by following their tutorial closely. I have replicated the code from both the DEMO and documentation, shown below: // js/calendar.js import Calendar from '../node_modules/color-calendar&ap ...
For days, I have been attempting to align 4 div tags (accommodation site widgets) within another div tag so that they are displayed in a single horizontal line side by side. Despite using CSS properties such as "float" and "display", only 2 out of the 4 di ...
One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...
Yes, the positioning of the parent container is set to relative. I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport. I have created circular divs that are ...
Is it possible to alter the color of an image hosted on a different website? Here is a link to an example image: Is there a technique to overlay a specific color on the image and only modify certain colors, such as changing or adding a layer of light gre ...
Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...
Clicking the "Add New" button below will add new fields to the form. While everything is functioning properly, I would like the newly created fields to appear above the button instead of below it. How can this be achieved? (function($) { "use strict" ...
Is there a way to set the autofocus property in an input element that is not part of a form? I have tried adding the "autofocus" attribute to the input tag but it doesn't seem to be working. <div> //I have added the autofocus property her ...
Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...
My presentation for the MVP is outlined below: .navbar { flex-direction: row; } <!DOCTYPE html> <html lang="en" dir="ltr> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="h ...
Is it possible to retrieve all images that do not have the first class attribute as "content.slide0"? In my example, I am utilizing the Jsoup library to display selectable elements in a WebView. Elements element = doc.select("HERE_SOLUTION"); <head ...
I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...
I am having trouble getting my Bootstrap dropdown to toggle correctly, despite placing the JS script last. I have checked multiple resources and it was suggested that CDN may not have been imported correctly. I have also tested this on different browsers w ...
I've been trying to display the contents of an array in a div container on my HTML file, but I'm stuck. Here's what I currently have: function printArray() { var $container = $('.container'); $container.html(''); ...
I have been working on a function to convert shorthand CSS background declarations into longhand. The function I created is functional, but it does not handle cases where the background-color property includes color values like black or yellow. It also doe ...