diff --git a/container-padding/README.md b/container-padding/README.md new file mode 100644 index 0000000..1c881bd --- /dev/null +++ b/container-padding/README.md @@ -0,0 +1,21 @@ +# Responsible paddings # + +### How to use ### +Put the code in design system component, and use the mixin. Do not forget to delete any other padding except of the body element. Of course write the right container width. +Other paddings might be in the following components: +1. Design system +2. GRID +3. Javascript + CSS + TXT +4. Układ topu +5. Główne skrypty strefy banerowej + + +Created by • **[IdoMods](https://idomods.pl/)** • 2025 + + + +Design system +GRID +Javascript + CSS + TXT +Układ topu +Główne skrypty strefy banerowej \ No newline at end of file diff --git a/container-padding/container-padding.less b/container-padding/container-padding.less new file mode 100644 index 0000000..6886ad9 --- /dev/null +++ b/container-padding/container-padding.less @@ -0,0 +1,30 @@ +// Remove any other paddings inside other containers such content, layout on every page, so there is padding only on BODY +.responsive-padding() { + padding-left: 96px; + padding-right: 96px; + + @media (max-width: 1440px) { + padding-left: 64px; + padding-right: 64px; + } + + @media (max-width: 1280px) { + padding-left: 48px; + padding-right: 48px; + } + + @media (max-width: 978px) { + padding-left: 32px; + padding-right: 32px; + } + + @media (max-width: 756px) { + padding-left: 24px; + padding-right: 24px; + } + + @media (max-width: 480px) { + padding-left: 16px; + padding-right: 16px; + } +} \ No newline at end of file diff --git a/device-view-handler.js b/device-view-handler/device-view-handler.js similarity index 100% rename from device-view-handler.js rename to device-view-handler/device-view-handler.js