Topic: Removing right/left content margins
Hello,
My client is asking to remove right and left margins from the applications and I cant find where, this is how it looks like now :
https://i.gyazo.com/07834ff06998fdc46fd91b85e5379643.png
They want to the card to use the whole page
Regards
Anna Morawska staff answered 6 years ago
Hi there, if you use MDBContainer component, you can add prop fluid to make a wrapping div full width. To remove left & right padding add custom CSS rules:
import React from 'react';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBContainer } from 'mdbreact';
import './index.css'
const CardExample = () => {
return (
<MDBContainer fluid>
<MDBCard >
<MDBCardBody>
<MDBCardTitle>Card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make
up the bulk of the card's content.
</MDBCardText>
<MDBBtn href="#">MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBContainer>
)
}
export default CardExample;
index.css
.container-fluid{
padding-left: 0;
padding-right: 0;
}
B.L.o.w commented 5 years ago
I had the same issue, and using your method gave me a horizontal scroll I didn't bargain for.I used fluid on MDBContainer as shown and in the css, rather than targeting .container-fluid, I targetted .col instead.like so .col{ padding-left: 0; padding-right: 0; } and it worked.
Piotr Glejzer staff commented 5 years ago
Thanks for suggestion. Have a nice Day
imyke answered 6 years ago
Hello. I personally have this issue too, on mdb-vue. Applying your solution gave me the following: https://imgur.com/9LxSIBh
The codebase for that section is as follows:
<template>
<mdb-container fluid class="mx-0">
<mdb-row class="mx-0 mb-3">
<mdb-col class="col-md-2">
<mdb-card class="lte mr-auto">
<mdb-card-body>
<mdb-card-text>Some</mdb-card-text>
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col class="col-md-2 offset-md-8">
<mdb-card class="lte ml-auto">
<mdb-card-body>
<mdb-card-text>Some</mdb-card-text>
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
If there's something I'm doing wrong, please point it out.
imyke commented 6 years ago
Think I figured it out. the no-gutters
class did the trick.
Anna Morawska staff commented 6 years ago
Ok, great :) if you encounter any other problems, please open a new ticket on our support board and mark it accordingly to the technology you use - then it is easier for us to help you :)
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.0
- Device: Macbook pro 2013
- Browser: chrome
- OS: macos sierra
- Provided sample code: No
- Provided link: Yes