Set visibility to elements using custom css media query

Design help General
1

Hi friends.
I was wondering if is there any chance to hide some elements in accordance of size screen.
For example. Supposing that I have a serie of iphone pictures, one by one, then I can fit 5 of them designing on ‘DESKTOP’. I’d like to remove the last picture in accordance of browser resizing.
I know that I can do this on “Visible on:” and turning ON only which I would like.
But actually I’d like to add some breakpoints before the ‘tablet version’.

This is an example (they did with a slider, but basically is what I’m asking).

(scroll until the “80+ wireframes later” title section then resize the browser. Check what will happen with de screen pictures, they will hide the last ones in accordance of resize.

I’d like to do exactly the same behavior. Is there any way?

Thanks in advance.

2

Hey @PenMaster you could try setting a max-width on your parent element, position: relative and an overflow: hidden set to hide the other elements? :slight_smile: That’s what was done in the link you posted :slight_smile: Please let me know if this helps

3

Hi @Waldo, thanks for the message. But could you be more clear?
I did not get what you mean. I have a lot of images, I need to apply what you told me (position: relative, overflow: hidden) on all the images?

Thanks

4

Hey guys.
Does anyone can help me? I really would like to learn this.

Thanks in advance.

5

Hi @PenMaster
You can use custom css for hiding elements on certain screen width
For example,

@media (max-width: 500px) {
.class_of_your_element {
   display: none;
  }
}

Just create class/sub-class with particular name (hidden500, hidden1200, etc) and use them on the images that you want to hide

6

Hi @sabanna, sorry, but how can I do that? How can I add this custom css?
Thanks.

7

You can add custom CSS

  1. to the “Custom code” area in your site settings (will affect all pages)
    1277×924 50.4 KB
  1. to the “Custom code” area in the page settings (affect only the page)
    904×928 30.5 KB
  1. using “Embed code” widget (affect only the page with widget)
    306×939 37.6 KB

In any of this option, do not forget to use correct syntax for CSS, wrap code snippet in <style> </style>

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.