Content Slider - overriding !important defaults for mobile

Beaver Builder
1

Hi folks,

I’m stuck on trying to customize a content slider module on mobile. I hit a wall when I could not figure out how to override this CSS that is in the core Beaver stylesheet:

.fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text, .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text * {
    font-size: 14px !important;
    line-height: 22px !important;
}

This is overriding the CSS I’m trying to add:

.fl-slide-text h2 {
	font-size: 50px !important;
}

.home fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text  {
	font-size: 20px; !important;
}

I’m not sure if it is related, but I had to turn OFF the “Enable Auto Spacing” setting in order to keep the borders on some columns elsewhere in the site. Lots of struggling with !important overrides today!

Here’s the site – content slider is just on the home page (below hero). Small device breakpoint is at 1020px (don’t ask haha)

http://moveunited.mattdotcom.com/

2

Hi Adam,

I think the reason as to why you’re having a hard time overriding the CSS, is that you have place both the header (h2) and text inside a table.

Therefore, can you wrap the text that beneath the header (h2) in p tags and then try the following CSS, please.

@media (max-width: 1020px) {
  .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text, .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text h2 {
      font-size: 50px !important;
      line-height: 1.4 !important;
  }
  .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text, .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text p {
      font-size: 20px !important;
      line-height: 1.4 !important;
  }
}

Also, I have to ask why small device at 1020px ?

Thanks,
Danny