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

What causes the Material-UI Grid element to shift upon clicking it?

Selector for the Nth child element

Utilizing R to Extract Data from HTML Webpages

Achieving perfect alignment for CSS heading and floated controls in the center of the page

switch the visibility of the p tag based on its content

Tips for converting PSD template into HTML/CSS code

Is it possible to create a hyperlink in the <button> element?

What is the best way to use CSS to hyphenate a capitalized word?

Discover the power of AngularJS's ng-route feature for creating a dynamic and seamless one-page HTML template experience

Setting the root position of a div: How can it be done?

Trouble with the functionality of the Bootstrap collapse button

Issue with .get() method in jQuery affecting IE7, IE8, and IE9

Issues with 'floating' unordered lists

Is there a way to incorporate a JavaScript variable as the value for CSS width?

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

Tips for maintaining alignment of components within an Angular Material tab:

Evolutionary JavaScript Adaptations

From HTML element to pug-template with the use of the # symbol

The background image does not appear to be displaying correctly on GitHub pages

Sass fails to import the theme for the angular material checkbox