Custom Classes

[hholman]

I've assigned the custom class custom-slider-main to my slider module.

When I try targeting .custom-slider-main in my custom css stylesheet, the styles aren't picked up by the page.

@media screen and (max-width: 480px) {
    .custom-main-slider {display: none;}
}

However, if I target the selector path, I see results:

@media screen and (max-width: 480px) {
   body > div.header-container-wrapper > div > div.row-fluid-wrapper.row-depth-1.row-number-3 > div > div {display: none;}
}

I can see the custom class name in the html code:

<div class="span12 widget-span widget-type-image_slider custom-main-slider" style="" data-widget-type="image_slider" data-x="0" data-w="12">
<div class="cell-wrapper layout-widget-wrapper">
<span id="hs_cos_wrapper_module_148216460768110517" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image_slider" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image_slider"><div id="hs_cos_flex_slider_module_148216460768110517" class="hs_cos_flex-slider flex-slider-main slider-mode-slider">
 
<div class="hs_cos_flex-viewport" …
                  

What am I missing? 

[Ty]

Hi @hholman,

Are you sure the styles aren't picking up? I hopped into your templates and see that you still have this style in the sheet:

@media screen and (min-width: 480px) and (max-width: 768px) {
    .custom-main-slider {display: none;}
}

And on the preview, I see this:

from 481px wide +

And then once I hit 480px:

Could this have just been a cacheing issue? Please let me know if this problem persists, I'll be happy to try and figure it out! From my end right now, everything seems to be working normally!

Thanks!

-- Ty

[hholman]

I have caching disabled. 

I just went into my template and the stylesheet was using the selector path, not .custom-main-slider, hence I'm not sure how you were seeing the file contained .custom-main-slider. 

I've since changed it back to .custom-main-slider in the stead of  body > div.header-container-wrapper > div > div.row-fluid-wrapper.row-depth-1.row-number-3 > div > div and now display: none; is again not working.

I had this happen earlier with a custom class I assigned to the navigation. Apparently I'm not seeing something. For my mobile menu I've had to use body > div.header-container-wrapper > div > div.row-fluid-wrapper.row-depth-1.row-number-1 > div > div.span6.widget-span.widget-type-logo.zolo because targeting via existing classes isn't working. I can get it to respond by tweaking it in the web inspector, but not via my custom stylesheet. I feel like I'm missing something obvious.

Any help is thankfully welcomed.

[hholman]

I went for the mini-hack and added !important

All seems good to go.

I'll live with it.

[relabidin]

Hi @hholman,

Seems to me like a specificity issue, as in just calling the class .custom-main-slider isn't specific enough to override other styles that are affecting it. However, I am not a professional designer so I'm not 100% sure.

@ndwilliams3 and @stefen, do you guys have any thoughts on this?

Rami 

[ndwilliams3]

If this works

@media screen and (max-width: 480px) {
   body > div.header-container-wrapper > div > div.row-fluid-wrapper.row-depth-1.row-number-3 > div > div {display: none;}
}

but this does not

@media screen and (max-width: 480px) {
    .custom-main-slider {display: none;}
}

I would agree with @relabidin that there is a more specific style with display:block overriding it. Use inspect element in Chrome or Firefox. It's the easiest way to see which style declaration is taking priority.

[stefen]

I agree with @relabidin that it's probably a specificity issue. Do you have a link you can share?

If you just want to hide it on mobile you could also use the class "hidden-phone".