discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed blocks bottom paddings for mobile

Browse Source
This commit is contained in:
kvakazyambra 2023-11-23 22:02:55 +03:00
parent 954d964384
commit f0c9f85546
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Feed/Group.scss
View File

@ -36,7 +36,11 @@
.floor--group { .floor--group {
background: #e8e5f0; background: #e8e5f0;
padding: 4rem 0 3rem; padding: 4rem 0 0;
@include media-breakpoint-up(md) {
padding-bottom: 3rem;
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
.col-lg-12 { .col-lg-12 {

4
src/components/Feed/Row3.tsx
View File

@ -17,7 +17,9 @@ export const Row3 = (props: {
<div class="floor"> <div class="floor">
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="floor-header">{props.header}</div> <Show when={props.header}>
<div class="floor-header">{props.header}</div>
</Show>
<For each={props.articles}> <For each={props.articles}>
{(a) => ( {(a) => (
<div class="col-md-8"> <div class="col-md-8">

10
src/styles/app.scss
View File

@ -719,6 +719,10 @@ figure {
} }
} }
.floor-header {
margin-bottom: 0 !important;
}
.floor { .floor {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
margin-bottom: 6.4rem; margin-bottom: 6.4rem;
@ -810,6 +814,12 @@ figure {
} }
.row { .row {
@include media-breakpoint-down(md) {
> * {
margin-bottom: 2.4rem;
}
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-left: divide(-$container-padding-x, 2); margin-left: divide(-$container-padding-x, 2);
margin-right: divide(-$container-padding-x, 2); margin-right: divide(-$container-padding-x, 2);