Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might be causing the problem with multiple columns?

Here is a CSSDesk showcasing the code snippet:

body {
  background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
  width: 90%;
  max-width: 1100px;
  min-width: 800px;
  margin: 50px auto;
}
#columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
.pin {
  display: inline-block;
  background: #FEFEFE;
  border: 2px solid #FAFAFA;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.pin img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
@media (min-width: 1110px) {
  #columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}
@media (min-width: 1200px) {
  #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
}
#columns:hover .pin:not(:hover) {
  opacity: 0.4;
}
<div id="wrapper">
  <div id="columns">
    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
      <p>
        Donec a fermentum nisi.
      </p>
    </div>
    
    ... more HTML content here ...
    
  </div>
</div>

cssfirefoxresponsive-designmultiple-columns

Answer №1

To enhance the layout, delete the column-fill attribute with all its vendor prefixes.

Here are the attributes to remove: 

  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;

HTML content remains the same. 

body {
  background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
  width: 90%;
  max-width: 1100px;
  min-width: 800px;
  margin: 50px auto;
}
#columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 15px;
}
.pin {
  display: inline-block;
  background: #FEFEFE;
  border: 2px solid #FAFAFA;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.pin img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
@media (min-width: 960px) {
  #columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}
@media (min-width: 1100px) {
  #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
}
#columns:hover .pin:not(:hover) {
  opacity: 0.4;
}
<div id="wrapper">
  <div id="columns">
    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
      <p>
        Donec a fermentum nisi.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
      <p>
        Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
      </p>
    </div>

    <!-- Rest of the pins included here for brevity -->

  </div>
</div>

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

Exploring the ins and outs of webpage loading speed

I am working on writing JavaScript code that includes a button to open a webpage of my choice. I now want to understand how to detect when the page I called is finished loading. Any suggestions or ideas on this topic? I apologize if my explanation was no ...

javascripthtmlcss

Two CSS files are loaded sequentially

Currently, when my HTML page loads, it first displays the styles from the initial CSS file before switching to the second CSS file. This brief moment where the page appears differently than intended is a bit frustrating. Is there a way to prevent this chan ...

htmlcss

Updating the background of the <html> tag using jQuery

Is there a way to modify this CSS using jQuery? html { background: yellow; } Attempting the following code does not yield the desired results: $('html').css('background','red'); ...

jquerycss

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

javascriptcssvue.jsbootstrap-4calculator

Convert HTML content to a PDF file with Java

Welcome to the community! My project involves extracting data from a website containing information on various chemical substances and converting it into a PDF while preserving the original HTML formatting, including CSS styles. For example, here is a li ...

javahtmlcsspdf

When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue: .flex-grid { display: flex; justify-content:space-between; } .flex-grid .rcorners1 { border-radius: 25px; background: green; ...

htmlcssflexbox

Displaying and hiding the top menu when the div is scrolled

I have developed a script that is designed to display the menu in a shaking motion and hide it as you scroll down. It functions properly when scrolling within the body of the webpage, but I am facing issues when attempting to do so with a div that has an o ...

javascriptjqueryhtmlcss

What is the best way to target an HTML element that is only connected to a particular class?

My HTML code includes the following 3 elements: <span class="a b"></span> <span class="a"></span> <span class="a b"></span> I am trying to select the element that only has the class "a". When I use $("span.a"), it sele ...

jquerycssclass

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

jqueryhtmlcsstwitter-bootstrap

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

csshtmlzooming

Effective methods to avoid showcasing AdSense advertisements

For the purpose of creating a responsive design, I am attempting to hide an adsense ad unit on smaller screen sizes. Although I am familiar with the method of using css media queries as outlined on Google AdSense support page, I have encountered an error w ...

javascriptresponsive-designadsense

The concept of vertical alignment within the CSS Grid system

I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout: *A******* *B * *C******* ********* * * ********* ********* * * ********* While the grid template rows a ...

csscss-grid

Creating a dynamic hover drop-down navigation bar in ASP.NET

After successfully creating a navigation bar with hover effects, I am now looking to implement a dropdown list when hovering over the items. Can anyone provide guidance on how to achieve this? Below is the current code snippet I am working with: <ul c ...

htmlcssasp.net

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

htmlcss

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly apprecia ...

javascriptjqueryhtmlcssloading

The behavior of Datatables varies depending on the screen resolution

In my data table, there are numerous entries with child tables on each row of the main table. I am currently in the process of incorporating this type of functionality into my table, with a few modifications to create a table within the child row. You can ...

javascriptcssasp.net-mvcresponsive-designdatatables

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss

Sort slider items using Show/Hide feature in bxSlider

I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...

javascriptjqueryhtmlcssbxslider

The ion-input border seems to be fluctuating as the keyboard appears on the screen

I'm currently working with Ionic 3 and experiencing an issue where the selected ion-input's border in the ion-content is shifting when the device keyboard appears on the screen. Here is a visual representation of the problem: https://i.stack.imgu ...

javascriptcssionic-frameworksassionic3