Topic: Avoid MDBRow Overflow
afshinshahpari@gmail.com asked 6 years ago
Hi, I would appreciate to have your advice regarding these items :
1) I have few MDBRows side by side and they have lots of MDBBButtons inside them. When I decrease screen width to see the results in smaller devices, the rows will overlap. How can I avoid overlap, I have mdbbcontainer with fluid and also I have tried all MDBBRows properties like top, start,etc but had no effect.
2) I read your document for breakpoints, but I didnt get how to use that in our source code? Do I have to add these in our css file ? how to use them in elements? Is there a sample project to show how it has been used in your component?
where we have to use @include media-breakpoint-up , @include media-breakpoint-down, @include media-breakpoint-only?
// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
================================= @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... }
// Example usage: @include media-breakpoint-up(sm) { .some-class { display: block; }
}
Anna Morawska staff answered 6 years ago
Hi there,
Referring to your first question - please try to use MDBCol component as a child of MDBRow. Check out this code and the grid documentation. If you have any further questions, post them here, but please attach a working example.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import './index.css';
const gridExamplesPage = () => {
return (
<MDBContainer>
<MDBRow>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
<MDBCol size="1">.col-1</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol lg="2">.col-lg-2</MDBCol>
<MDBCol lg="2">.col-lg-2</MDBCol>
<MDBCol lg="2">.col-lg-2</MDBCol>
<MDBCol lg="2">.col-lg-2</MDBCol>
<MDBCol lg="2">.col-lg-2</MDBCol>
<MDBCol lg="2">.col-lg-2</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default gridExamplesPage;
Answering the second question - media queries in a form which you mentioned - "@include media-breakpoin..." - are available if you use SASS preprocessor to style your components. If not, use a regular media query, for example :
@media (min-width: 576px) { ... }
Best, Ania
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: Mac
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No