[Bug] responsive padding and margin not working on single pages

[brunoamaral]

Version

1.0.9

Reproduction link

https://brunoamaral.eu/post/drop-dead-digital/

Operating System

iOS

Device

iphone 12

Browser & Version

safari latest

Steps to reproduce

1. Add margin and padding for different breakpoints to the section after a header, such as header-7: py-0 mt-0 py-md-5 mt-md-5 instead of py-5 mt-5 that is used right now
2. When I checked, these new breakpoints didn't have any effect.

Maybe i'm missing something regarding bootstrap 5, let's not rule that out. Yet, on mobile, single pages tend to show only the title and the user has no cue that they can scroll down. Specially now that Safari shows the address bar on the bottom by default.

What is expected?

different margin and padding on mobile

What is actually happening?

nothing

---

Solution

Additional comments

[rarestoma]

Hi @brunoamaral,

Thank you for working with our products.

I just checked now the CSS and SCSS files available in Soft UI Design System PRO and the mt-lg-... classes exist there. I checked your CSS file and I see that there these classes do not exist.

Did you modify something?

Thank you,
Rares

[brunoamaral]

Hi @rarestoma . Thank you for taking a look. I didn't modify anything other than porting the html to Hugo. What scss file contains the mt-lg- class? I'm trying to see if there is something wrong in the way hugo processes the files.

Update, I'm building the css from the initial soft-design-system-pro.scss file.

{{- $softUi := resources.Get "scss/soft-design-system-pro.scss" | resources.ToCSS (dict "enableSourceMap" true "outputStyle" "compressed") }}
{{ $styles := $softUi | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint  -}}

[brunoamaral]

I think I figured it out, the classes come back when I disable the postCSS above. Which is strange, all I have there is this:

module.exports = {
    plugins: {
        '@fullhuman/postcss-purgecss': {
            content: ['./layouts/**/*.html', './themes/soft-ui/layouts/**/*.html', './content/**/*.html', './content/**/*.md'],
            safelist: {
                greedy: [/.animate.*/]
            },
            fontFace: false,
            variables: false
        },
        autoprefixer: {},
        cssnano: {
            preset: [
                "default",
                { "discardComments": { "removeAll": true } }
            ]
        }

        //cssnano: { preset: 'default' }
    }
};

Soft-UI is in the layouts directory, so I don't see a reason why the tree shaking is getting rid of the responsive margins.

Thank you for your help in figuring the problem, @rarestoma 🙂