Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to a mobile screen size. Attempting to scroll through the projects causes them to overlap the title. To see the problem firsthand, visit this link: text and shrink the viewport width to 500.

I have experimented with adjusting the height of the projects column, yet the issue persists. If you require access to the code, please let me know, and I will gladly provide it.

Answer №1

The container that houses those columns was styled with the classes row row-cols-1 row-cols-md-2. This sets it to be two columns for medium width and larger (lg, xl), while for xs and sm widths it defaults to a single column due to the row-cols-1 class. Removing the row-cols-1 class will ensure it displays as two columns across all sizes.

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

Executing jQuery post request on a div loaded via ajax

I'm facing a challenge with my webpage. I have a section where the content of a div is loaded via ajax. This div contains forms, and after submission, it should update to display the new content without refreshing the entire page. Can anyone guide me ...

javascript php jquery html ajax

IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't. Here's the code for my div block: btndownlo ...

html css

Hovering over the Jquery menu will display only the first child element

Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...

jquery css jquery-ui

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascript jquery html css

What is the best way to design the paper of a Drawer component in MUI?

The latest update from Material-UI, called MUI 5, suggests moving away from using makeStyles for styling and instead recommends using emotion css. I am curious about how to style the paper element of the drawer component. Specifically, I want to apply a cu ...

reactjs material-ui emotion

Steps for deactivating a button until the form has been submitted

Click here for the Fiddle and code sample: $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); var form = $(this); // Additional line $.post(url, data, function(data) { try { ...

javascript jquery html ajax forms

The IP address for Socket.io connections is constantly in flux

My experience with socket.io is fairly new, as I've been following tutorials to integrate it into my MERN stack website. Despite my efforts, I encountered an error on the frontend when trying to connect to socket.io on the backend. I suspect this issu ...

node.js reactjs express socket.io http-status-code-400

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascript html css menu onclick

Showing a dropdown menu within a React Antd Table

const bands = this.props.ApplicationContainer.bands; if(bands) { var bandsHtml = '<Select defaultValue="Select"><Option value="Select">Select</Option>'; const ...

reactjs antd

Use Material UI Grid to create a horizontal line design instead of focusing on making the

Is there a way to turn off responsiveness for the material UI grid similar to how it can be done with a basic HTML table? While an HTML table scales down and adds a horizontal scroll bar, the material UI grid remains responsive as shown in the example belo ...

javascript reactjs material-ui

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

php html

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

css image html-lists alignment

The vertical scrolling issue arises when the content exceeds the height of the screen

Seeking a solution to enable scrolling of users within a flexbox menu, I've come across an interesting discovery. When setting a specific height in pixels for my nav element (like 100px), everything works perfectly. However, when I set the height to 1 ...

css bootstrap-4

Manipulating certain attributes of a CSS class for a specific division element

I'm working with a div that has a CSS class applied to it. The class declares the height as x pixels, but I actually want my div to be y pixels high. Is there a way to override the height parameter of the CSS without making changes to the CSS file? ...

html css

The Google Language Translator disregards the formatting

Currently, I am in the midst of developing a website with Wordpress and have successfully integrated Google Language Translator. Everything seems to be working well, except for one issue - when I translate the content, it alters the font size. Prior to tra ...

html css wordpress

Update the array in state by adding a new element using setState

How can I add a new element to an array using setState? Consider the following data: this.state = { items : [ { "id" : "324", "parent" : "qqqq", "text" : "Simple root node" }, { "id" : "24", "parent" : "dwdw", "text" : "Root node" }, { "id" ...

javascript reactjs

How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

After inspecting the source code for this website, I noticed a cool feature where the page changes based on your scrolling position. It creates a visually appealing effect. Upon further examination of the source in FireFox, I observed the use of -webkit-t ...

javascript jquery html css internet-explorer

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascript php html

Is there a way to update Checkbox changes within a Datagrid without selecting the entire row?

My Table Cell Checkbox Behavior Issue: Within a table cell, I have a checkbox that changes upon clicking it. However, the change only occurs the first time. Subsequent clicks on the same checkbox do not trigger any change until I click outside the cell. T ...

javascript reactjs typescript material-ui mui-x

NextJS page navigation with React tabs - incorrect display update issue

I'm trying to switch between pages by using tabs: import * as React from 'react' import Box from '@mui/material/Box' import Tabs from '@mui/material/Tabs' import Tab from '@mui/material/Tab' import {useState, us ...

reactjs next.js

CSSer Q&A