Conceal specific image(s) on mobile devices

Question

Conceal specific image(s) on mobile devices

Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve this. As my site's code is extensive, it would be best to visit the actual page and utilize "inspect" to analyze the code directly. Despite my attempts with CSS code, I have been unsuccessful in hiding the images, leaving me puzzled as to what mistake I might be making. For reference, you can view the problematic page at Zoeaa.com.

Your assistance and feedback on this matter would be greatly appreciated! If there are any suggestions for improving the clarity of my question, please do not hesitate to share them.

Here is a photo of the issue

css html

Answer 1

Answer №1

Something similar to this

//if the screen size is less than 768px (mobile view)
@media only screen and (max-width: 768px)
{
    //only show up to second-to-last list item
    .pop_members ul li:nth-last-child(-n+2) { 
        display:none; 
    }
}

When the screen size is smaller than 768px, this code will hide the last two items in the list.

Answer 2

Something similar to this

//if the screen size is less than 768px (mobile view)
@media only screen and (max-width: 768px)
{
    //only show up to second-to-last list item
    .pop_members ul li:nth-last-child(-n+2) { 
        display:none; 
    }
}

When the screen size is smaller than 768px, this code will hide the last two items in the list.

Answer 3

Answer №2

Perhaps you could try approaching it this way. I typically employ this technique when I need to conceal something on the webpage, allowing for the hiding of any desired element.

However, the effectiveness of this method does rely on the structure of your code. There are numerous approaches to hiding an element. I trust this advice proves valuable to you!

@media only screen and (max-width: 768px) {

    //Create a CSS class specifically for hiding content on mobile devices.
    //Apply the class "desktop-only" to the image (or list item) that you wish to hide on mobile view.
    .desktop-only {
        display: none;
    }
}

Answer 4

Perhaps you could try approaching it this way. I typically employ this technique when I need to conceal something on the webpage, allowing for the hiding of any desired element.

However, the effectiveness of this method does rely on the structure of your code. There are numerous approaches to hiding an element. I trust this advice proves valuable to you!

@media only screen and (max-width: 768px) {

    //Create a CSS class specifically for hiding content on mobile devices.
    //Apply the class "desktop-only" to the image (or list item) that you wish to hide on mobile view.
    .desktop-only {
        display: none;
    }
}

Conceal specific image(s) on mobile devices

Answer №1

Answer №2

Similar questions

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Having trouble integrating Bootstrap with Fullpage.js

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

Creating a dynamic 3x3 layout using flexbox: a step-by-step guide

Increase the spacing between the scrollbar and the border

Processing made easy with jQuery

Is it possible to locate an element using regex in Python while using Selenium?

Syntax error detected: Unexpected T_ELSEIF statement

Techniques for retrieving elements from HTML using jQuery

Customizing the scrollbar within a modal using reactjs-popup

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

Difficulty altering link hover background color

Tips for extracting designated link by employing a Selector CSS Query

coding with javascript and css

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

Movement occurring outside the boundaries of the element

When an option is selected, the CSS class associated with that option is removed

Aligning floating elements in the center

Acquire the "value" and utilize it within a different function

What is the best way to incorporate a sliding effect into my cookie form?