Removing right/left content margins


Topic: Removing right/left content margins

gllermaly asked 6 years ago

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&apos;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 :)


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • 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
Tags