Contrib.social

Disable padding-bottom in blazy markup for background-image mode

Open on Drupal.org →
Created on 20 April 2023, over 1 year ago
Updated 21 April 2023, over 1 year ago

Problem/Motivation

I am trying to position a background-image mode slider with a fixed height and using 'center center' background image attribute. It almost gives me what I need but 'padding-bottom' is appearing in the blazy element markup. How can I remove padding-bottom? I searched thru the module code and can't sort it. Sorry to bother about this - I am very close to what I need but not sure how to change it.

Steps to reproduce

Using the following CSS and configuration settings. I had not yet set the breakpoints inside the image styles interface, but figured I would position the image correctly first on desktop before going back to that. No idea where 'padding-bottom' gets put into the code, on the blazy twig template file. Thanks for any assistance!

body.section-projects {
  .herorow--inner {
    @include breakpoint(large up) {
      max-height: 670px;
    }
    @include breakpoint(medium only) {
      max-height: 483px;
    }
    @include breakpoint(small down) {
      max-height: 260px; // trying this size for now. depends on image compositions
    }
 
    .media--splide { // has background image attribute
      background-position: center center;
      @include breakpoint(large up) {
        height: 670px;
      }
      @include breakpoint(medium only) {
        height: 483px;
      }
      @include breakpoint(small down) {
        height: 260px; // trying this size for now. depends on image compositions
      }
    
    }
  }
}



💬 Support request
Status

Fixed

Version

1.0

Component

Documentation

Created by

🇺🇸United States hongpong Philadelphia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @hongpong
  • Comment over 1 year ago →
    🇺🇸United States hongpong Philadelphia
  • Comment over 1 year ago →
    🇺🇸United States hongpong Philadelphia
  • Comment over 1 year ago →
    🇺🇸United States hongpong Philadelphia
  • Status changed to Fixed over 1 year ago
  • Comment over 1 year ago →
    🇮🇩Indonesia gausarts

    Regular CSS files can be overriden by adding more specificity, or order your CSS to bottom as normally done by defaults via Drupal theme system.

    Inline styles, normally dynamic ones, JS or PHP, must be overriden with !important declaration, e.g.:
    padding-bottom: 0 !important;

    Just be sure you put the right selector to override as seen in your screenshot.

    Hope that helps.

  • Comment over 1 year ago →
    🇺🇸United States hongpong Philadelphia

    Thank you gausarts for the prompt response. I also tried using jQuery to remove the padding-bottom from the element's properties in a custom JS file. However I am not sure how to listen for the ready event of the slider's initialization, so the jQuery runs too early. I see there is a window.Splide javascript object, however I could not determine how to listen for the ready state in an outside script. ( I would rather not simply add a timer to 'wait' for it) . Best regards.

  • Comment over 1 year ago →
    🇮🇩Indonesia gausarts

    I added more info in #5, hope it nailed it :)

  • Comment over 1 year ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024