Are there limitations on column width and count in CSS3?

While exploring the URL http://www.w3.org/TR/css3-multicol/, I noticed that it only allows you to specify either 'column-width' or 'column-count', and sometimes both using 'columns'. However, it lacks options to set minimum width and maximum count.

For instance, on the OpenBSD ports category index found at http://ports.su/, there are a total of 71 categories, usually fitting within 9em.

If I apply 'ul {-moz-column-width: 9em;}', it means that with 89em and above, there will be at least 9 columns. This results in each column having very few categories, making navigation more challenging as users need to scroll from top to bottom even though the text appears left-to-right. Is there a way to order columns from left to right instead of top to bottom?

Alternatively, if I opt for '-moz-column-count: 8;', the site may become less user-friendly on smaller screens below around 70em.

Is there a possible solution to address this issue?

htmlcss

Answer №1

A solution to creating rules for different screens is by utilizing @media queries.

Explore more about @media queries here

ul { -moz-columns: 9em; }

@media (min-width: 89em) {
  ul { -moz-columns: 8; }
}

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

Activate Click, or Pop-up Box

I've been attempting to log in to the Udemy site using JavaScript, but I'm having trouble triggering the click action on the "log in" link. Unfortunately, the .click() method doesn't seem to be working when I try to select the element. The l ...

javascriptcsshtml

The parallax background features a sleek design with crisp white borders framing the edges

We are currently facing an issue while attempting to incorporate a parallax background on our website. The problem lies in an unwanted white border surrounding the image that can be seen at this link: https://i.stack.imgur.com/pt0Pf.jpg. Despite trying va ...

htmlcssbackgroundbackground-imageparallax

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

javascripthtmljsonvue.jstemplates

Populate the combobox located within the Freemarker template

My goal is to populate a combobox with data that is stored in a List<ArrayList<String>> named column. This is the code snippet I am using to load data onto the template: List<ArrayList<String>> columna = con.getColumn("table", "co ...

javahtmlcomboboxfreemarker

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

Place the label and input elements next to each other within the form-group

My form group includes both a label and an input field <div class="col-md-12 form-group"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngMode ...

cssangulartwitter-bootstrapbootstrap-4

Tips on appending a search URL with "&*":

I need to create a search bar that connects to google.no (Norway). When searching for music, the URL should look like this: *. Can anyone help me understand how to add the (& *) at the end of a search? .search { border: solid 1px grey; border-ra ...

htmlcss

Error: The WebGL function enablevertexattribarray has an index that is outside the valid range

Take a look at the vertex and fragment shaders I've written: <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uSampler; varying vec4 vColor; varying vec2 vTextur ...

htmlopengl-eswebgl

JavaScript is unable to modify the value of an input in HTML

function modifyComment(id) { var pageID = "<?= $ID ?>"; var commentID = "p" + id; console.log(id); console.log(commentID); console.log(pageID); var commentContent = document.getElementById(commentID).innerHTML; < ...

javascripthtml

Multer error message: "The file or directory you are looking for does not exist"

I am encountering errors while attempting to upload multiple files through Mongoose using multer. As I am new to multer, any assistance would be greatly appreciated. Thank you. Below is my app.js const storage = multer.diskStorage({ destination: functio ...

htmlnode.jsexpressmongoosemulter

Tips for incorporating a zoom feature into a bootstrap carousel

I've been attempting to incorporate a zoom effect into a bootstrap carousel, but for some reason, I can't seem to get it to work :( I suspect that I may need to insert the syntax into the core _carousel.scss file (or maybe not?). Despite my atte ...

jqueryhtmlcsssassbootstrap-4

Detecting iOS format in HTML email communications allows for a more seamless

Recently, I discovered a meta tag that removes the phone number as a link in HTML on iOS. I'm curious if this also works with HTML emails. <meta name="format-detection" content="telephone=no"> I've been using workarounds to handle address ...

htmlhtml-email

Modify the file names during the upload process and remove chosen files from multiple directories

I have written some code and my question is how can I rename a file while uploading it and also include the file size in the upload process so that I can fetch the file size in my report as well. <?php if ((!isset($_GET['admin'])) and (!is ...

phpcssajax

Align Bootstrap list items vertically

I'm facing a challenge with aligning the yellow list item blocks vertically in my design. The issue arises because the black dog item is not aligning properly due to its image being shorter than the other two blocks. I've been struggling to find ...

htmlcss

Tips for retaining the value of a variable in JavaScript

I am a page that continuously redirects to itself, featuring next day and previous day arrows. Upon loading, the page always displays the new day. The days are stored in a localStorage as follows: for(var i = 0; i < status.length; i++) { local ...

javascriptjqueryhtml

Effortlessly Display or Conceal Numerous Table Columns Using jQuery

I have a small table where I want to hide certain details with a basic button... for instance, table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 5px 10px; } <button>Show/Hide Details</button> <table> ...

javascriptjqueryhtml

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

javascripthtml

Incorporating Tailwind CSS into Vue transitions reveals an issue where the fade out effect

I'm working with Tailwind CSS and Vue.js to create a modal component. Since Tailwind doesn't natively support Vue 2, I had to implement the transitions myself. You can check out the desired effect here. Below is the code snippet: <template> ...

cssvue.jscss-transitionstailwind-css

Incorporating a URL into an HTML marquee

As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...

htmlcss