addressing custom classes with css in theme options

[MarieWorks]

Hi,

I have given two assets on my home page (the regular and mini versions of our staff picks product carousels) custom class names in the page builder.

I would like to be able to address them in the CSS using @media to define what shows up on what kind of device.
(we want the mini style of product list to show our ‘staff picks’ on mobiles, but from tablets upward we want the large carousel to be used).

I think this should all be fairly achievable in CSS – now that these elements have custom diff classes (staffpicksnarrow and staffpickswide) – but I haven’t quite been able to work out how to do it yet…

Any help would be greatly appreciated.

Many thanks,

Chris

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Here is a very useful list of all media queries you could use: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Tablet Example:

@media (max-width: 979px) and (min-width: 768px) {
   .staffpickswide {
       display: block; /* Show */
   }
   .staffpicksnarrow {
       display: none; /* Hide */
   }
}

Thanks.

[MarieWorks]

Awesome,

thanks David – I’ll give these a go.

C

[Rui Guerreiro – SUPPORT]

Nice. Thanks David.
-Rui