Display fewer categories (list items) on mobile and medium-sized devices

I need assistance with modifying a code snippet to display a menu with categories. Here's the current code:


  <div class=" d-md-block">
        <div class="container">
            <div class="row">
                <div class="col p-0 m-0">
                    <ul class="Categories__Menu">
                        @foreach($categories->take(6) as $category)
                            <li class="">
                                <a href="javascript:void(0)" name="category" id="{{$category->id}}">{{$category->name}}</a>
                            </li>
                        @endforeach

                        <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Can you help me adjust it so that on small devices, only 2 list items are displayed instead of 6, and on medium devices, only 3 list items are shown?

Answer №1

Provided is an uncomplicated approach with a medium width of 1020px and small width of 768px, however, these values can be adjusted according to your specific requirements:

    @media ( max-width: 1020px) { 
         .Categories__Menu > li:nth-child(n+3) {
             display: none;
         }
    }

    @media ( max-width: 768px) { 
         .Categories__Menu > li:nth-child(n+2) {
             display: none;
         }
    }

Within :nth-child(), mathematical expressions using n are supported such as -3n+2, calculated starting from n=0.

Answer №2

To achieve responsive design, you can utilize media queries by selecting appropriate breakpoints for different devices.

 @media only screen and (max-width: 600px) {
            .ullist li:nth-child(3),
            .ullist li:nth-child(4),
            .ullist li:nth-child(5),
            .ullist li:nth-child(6) {
                display: none;
            }
        }

<ul class="ullist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>

</ul>

The code above will show all six list items on devices wider than 600px and hide the last four on smaller devices. You can adjust the breakpoint according to your requirements.

If needed, you can use SCSS to loop through all list items. Here's a resource on how to implement a loop in CSS using SCSS:

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

Utilizing two distinct CSS frameworks within a single Rails application

At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

Selecting sibling elements based on their position in the hierarchy can be achieved using a CSS selector that targets

In the scenario where there is an HTML element with multiple siblings: <div id=parent> <div></div> <div></div> <div></div> ... <div id=fourthToLast></div> ...

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...

Positioning a list or div in CSS and HTML can be achieved with or without thumbnails

My website showcases our expertise in various topics, each with a header, image, and a brief list. The page displays thumbnail images and headers for all topics, with one topic highlighted in full that users can navigate through by hovering over different ...

Dynamically apply focus styles to div elements using CSS styling

In my dialog, I have a textbox on the left side and an icon (div) on the right side. When the dialog opens, both elements should be focused. Here is the HTML code: <input id="text-link" class="form-control" onfocus="this.select();" onclick="this.selec ...

Track and log specific route requests with ExpressJS morgan feature

Hello, I am currently utilizing the NodeJS web framework Expressjs along with a middleware called morgan to log requests to a file. Here is my configuration: // create a write stream (in append mode) var accessLogStream = fs.createWriteStream(__dirname + ...

The specified MIME type (text/html) is not compatible with stylesheets

When attempting to link a css file to my express-handlebars file, I encountered the following error: The style from 'http://localhost:4000/cs366/style/draft.css' was refused due to its MIME type ('text/html') not being a supported st ...

Having trouble loading CSS file in node js after submitting form

Before diving into more details, let me explain my current situation. I am utilizing node's nodemailer to facilitate the process of sending emails based on the information submitted through a form. Initially, everything was functioning smoothly when t ...

What is the functionality behind this unique SCSS mixin that combines flexbox and grid layouts?

Discover a SCSS mixin for creating flexbox/grid layouts HERE. Take a look at the complete mixin code below: @mixin grid-col( $col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, ...

Is it necessary for children to occupy the same area while beginning from the coordinates 0, 0?

Imagine a scenario where you have a modal with tabs and tab content. Each tab has a different height - the first tab is 100px high, the second tab is 500px high, and the third tab is 50px high. The challenge here is to ensure that the modal body always mat ...

Hover over to see the impressive special effect produced by Scriptaculous Effect.Appear

Having an issue with using scriptaculous Effect.Appear() as a menu option. I'm trying to create a flash-like menu using pure css and scriptaculous. I've managed to achieve the desired outcome where hovering over a box triggers a text (with displ ...

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

Can we incorporate modal images into the design?

Can modal images be incorporated into a blog post? If necessary, I'm utilizing the Vimux/Mainroad theme. ...

UIBootstrap Tooltip Triggering on Various Events

Can the triggers for Tooltip in UIBootstrap be extended to accept multiple conditions? For instance, I would like my tooltip to close on both 'blur' and 'click' actions. I attempted to pass in an array but it did not work: $tooltipPr ...

Issue with reactivity in Laravel and Inertia.js using Vue3

Is it possible that the reactivity of Vue is being blocked by Inertia.js page components? Within my Page component, there is a single file component. I have a function that adds items to the ItemsManager.items object. When I run this function, the single ...

Mobile-friendly FlexImages grid with justified image sizes

Currently utilizing the FlexImages jQuery plugin for a Justified grid, which is performing well. The only issue I am encountering is the desire for the images to span 100% width on mobile devices (viewport of 550px or less). If interested in checking out ...

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...