Topic: card deck right margin
I am using brand new project mdb-angular-free 8.7.0 . I copied the html code from the card decks example :https://mdbootstrap.com/docs/angular/components/cards/ in the app.component.html
I noticed there is a space at the right margin of the browser and I could scroll right and left the browser window.
I expected to not be any free space in the right.
This is caused by the Bootstrap negative margin styles, the cards will be displayed correctly inside the elements with .container and .row class. Please add these wrappers around your card decks code:
<div class="container"> // you can use container-fluid as well
<div class="row">
// paste your card decks code here
</div>
</div>
If it doesn't work in your case, you can also try to add card deck wrapper element with padding left and right set to 15px or remove the negative margins from the card deck completely.
Create div with this class name and place the card deck code inside:
.card-deck-wrapper {
padding-left: 15px;
padding-right: 15px;
}
or remove negative margins:
.card-deck {
margin-left: 0px;
margin-right: 0px;
}
Adrian Dragomir commented 5 years ago
Thank you very much for your answer. Using .container and .row it's working but the cards are aligned to the center without to use the entire width of the screen (left and right white margins). Using .container-fluid with .row will stretch the cards to use the entire screen but will have the same problem: a scroll bar at the bottom and a right white margin.
Arkadiusz Idzikowski staff commented 5 years ago
I edited my answer, please take a look at the other solutions.
Adrian Dragomir commented 5 years ago
Removing the negative margins was the best solution.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.7.0
- Device: any
- Browser: any
- OS: Windows
- Provided sample code: No
- Provided link: Yes