Card columns in Bootstrap 4 occasionally show varying column displays in Chrome compared to other web browsers

I'm encountering an issue where the cards in my cards-column are displaying differently on Chrome compared to Edge and Firefox. Most of the time, they show up in two columns, but not consistently across all pages.

For example, one specific page is only showing one column when I navigate to the "Meny" tab:

On the other hand, a different page under the same "Meny" tab, , displays correctly with two columns on all browsers including Chrome.

The problem seems to be isolated to Chrome as Edge and Firefox render the cards properly. Here's an example where the issue occurs in Chrome but works fine in Edge: https://i.sstatic.net/YSNmA.jpg

Interestingly, another page renders perfectly fine in Chrome without any issues: https://i.sstatic.net/dj7T6.jpg

cssgoogle-chromebootstrap-4

Answer №1

Unfortunately, I am unable to access your source code due to issues with your website. However, based on what I can see, it appears that everything is functioning properly in Chrome with a simple modification to the column-count.

For devices with extra small screens (portrait phones under 576px)

For devices with small screens (landscape phones, 576px and above)

https://i.sstatic.net/nMv9M.png

For devices with medium screens (tablets, 768px and above)

https://i.sstatic.net/G4kYx.png

For devices with large screens (desktops, 992px and above)

For devices with extra large screens (large desktops, 1200px and above)

https://i.sstatic.net/NKmY4.png

Answer №2

For those who have implemented the following CSS rule:

#menycol {
column-count: 2;
}

There is no necessity to specify display and width, simply deactivate or delete them.

.card-columns .card {
/* display: inline-block; */
/* width: 100%; */
}

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

Placing a button at the bottom of a bootstrap well

Hey there, I'm facing an issue with the button positioning. I really need the button to be placed at the bottom of the well, but for some reason, it keeps showing up next to the image instead. This is what's happening: the button is ending up be ...

htmlcsstwitter-bootstrap

Dealing with an undefined value in a Json result format: tips and tricks

While attempting to create a search filter, I encountered an error when inserting data type as an integer. I am in need of assistance on how to resolve this issue. Upon diving into the Json GetStringData method where the error occurs, I noticed that &apos ...

c#jqueryasp.net-mvcbootstrap-4

Fix a bug in IE6 by ensuring that an element takes up 100% of the body when contained within

It appears that this issue is specific to IE6, as the code functions correctly in all other browsers. Check out the jsFiddle link with the HTML code: <div style="background:blue; width:600px; margin-left:auto; margin-right:auto;"> BLUE < ...

htmlcssinternet-explorer-6

Styling <CardHeader> component with React and Material UI CSS

Incorporating React and Material UI, my goal is to arrange 3 divs within a <Card> <CardHeader/>, positioning them with left, center, and right alignment as illustrated below. The modification required is minor - I simply need to eliminate the ...

cssreactjsmaterial-ui

Issue with displaying svg images on Samsung Galaxy S7 mobile device

Having trouble filling an SVG image on my Samsung S7 mobile. It works perfectly fine on other devices. style="fill:white;" ...

htmlcss

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

javascripthtmlcssnode.jstypescript

The table header does not stay in place or remain fixed

My issue lies in using bootstrap, HTML, and CSS. As I scroll, the table header does not move along with the data. I've attempted implementing sticky-top and position-relative without any success. <div class="tab-div"><table class="table tab ...

htmlcssbootstrap-4

Javascript function failing to execute upon page load

I don't have much experience with JavaScript, but I found the following code in a .htm file. The function doesn't seem to be triggering when it should; It is supposed to activate when the page is directly opened i.e www.site.com/12345.htm This ...

javascripthtmlcss

Discover a new way to showcase user information by utilizing the popover feature of Bootstrap, all without the need for a

I am currently working on a project in razor page asp.net and I have encountered an issue. I am unable to display user details using a mouse hover or popover without relying on the bootstrap modal. Here is the code I am using: <button type="button ...

jquerycssasp.net-corebootstrap-4razor-pages

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

Could not locate the CSS file within the HTML document (404)

I've searched high and low on YouTube but can't seem to find a solution to this problem. Every time I run the code, it gives me an error message saying GET net::ERR_ABORTED 404 (NOT FOUND) <html> <head> <title>itays websit ...

htmlcss

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

phphtmlcsswordpress

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

RESOLVED: the solution is in a comment TL;DR: Issues triggering Bootstrap's JS, likely due to incorrect import of JS scripts I've been working on integrating Bootstrap with my custom reusable web components across all pages. Specifically, I&apo ...

javascripthtmlcsstwitter-bootstrapweb-frontend

Steps to align a column inline using Bootstrap 4's auto feature

I'm trying to inline a column icon with a responsive column table, but the second column keeps breaking to a new line. I've already applied a responsive table that should scroll horizontally if it exceeds the parent width, but the issue persists. ...

htmlcssbootstrap-4

What steps can I take to ensure my website maintains a consistent appearance across various internet browsers?

I'm fairly new to web development; my knowledge is limited to CSS and HTML, just enough to make a website look good. I would appreciate it if you could explain things in simple terms. I've been researching how to ensure that a website looks the ...

htmlcssmultiple-browsers

Guide to positioning a button on top of another button using Vuetify

I'm facing an issue where I want to add a button on a clickable card, but clicking the button also triggers the card click event. Here's my current code snippet: <v-card @click="show = !show"> <v-img src="https://cdn.vuetifyjs.com/im ...

cssvue.jsvuetify.js

Is there a way to define the width of an element within the display:flex property in CSS?

Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...

javascripthtmljquerycss

Table within a table does not occupy full height within a table cell

I encountered an issue while nesting a table within a td element. The behavior differs between browsers: in Firefox, the nested table fills the entire cell from top to bottom, but in Edge and Chrome, it is centered within the td cell and does not occupy th ...

htmlcsshtml-table

Implement CSS styling within XML responses in jQuery UI autocomplete

Can you apply a different CSS class to a specific part of the label in the XML response? Currently, the label value is: label: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ) + ", " + $( "countryCode" ...

jquerycssxmluser-interfaceautocomplete

Ensuring continuous execution of JS EventListener

The other day, I received a solution from someone on this platform for a script that changes the color of a div when scrolling. Here is the code I implemented: const x = document.getElementById("menuID"); window.addEventListener("scroll", () => { ...

javascripthtmlcss