Classicform example not responsive

Hi @Denzil,

Thank you for founded bug!  

We will try to fix it as soon as possible.  

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.  

Best Regards,  

Kuba

Hi Kuba,

Do you have ETA for a fix, we are trying to build the page based on this example and/or grid components and its not correctly breaking on breakpoints and not responsive. Thanks.

@Denzil,

We just solve this problem, You need to add additional style to this template.

JSX:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBMask,
  MDBRow,
  MDBCol,
  MDBBtn,
  MDBView,
  MDBContainer,
  MDBFormInline,
  MDBCard,
  MDBCardBody,
  MDBInput
} from 'mdbreact';
import './ContactFormPage.css';

class ContactFormPage extends React.Component {
  state = {
    collapseID: ''
  };

  toggleCollapse = collapseID => () =>
    this.setState(prevState => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : ''
    }));

  componentDidMount() {
    document.querySelector('nav').style.height = '65px';
  }

  componentWillUnmount() {
    document.querySelector('nav').style.height = 'auto';
  }

  render() {
    const { collapseID } = this.state;
    const navStyle = { marginTop: '65px' };
    const overlay = (
      <div
        id='sidenav-overlay'
        style={{ backgroundColor: 'transparent' }}
        onClick={this.toggleCollapse('navbarCollapse')}
      />
    );
    return (
      <div id='contactformpage'>
        <Router>
          <div>
            <MDBNavbar
              style={navStyle}
              color='deep-purple darken-4'
              dark
              expand='md'
              fixed='top'
              scrolling
              transparent
            >
              <MDBContainer>
                <MDBNavbarBrand>
                  <strong className='white-text'>MDB</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler
                  onClick={this.toggleCollapse('navbarCollapse')}
                />
                <MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
                  <MDBNavbarNav left>
                    <MDBNavItem active>
                      <MDBNavLink to='#!'>Home</MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to='#!'>Link</MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to='#!'>Profile</MDBNavLink>
                    </MDBNavItem>
                  </MDBNavbarNav>
                  <MDBNavbarNav right>
                    <MDBNavItem>
                      <MDBFormInline waves>
                        <div className='md-form my-0'>
                          <input
                            className='form-control mr-sm-2'
                            type='text'
                            placeholder='Search'
                            aria-label='Search'
                          />
                        </div>
                      </MDBFormInline>
                    </MDBNavItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBContainer>
            </MDBNavbar>
            {collapseID && overlay}
          </div>
        </Router>

        <MDBView>
          <MDBMask overlay='indigo-strong' />
          <MDBContainer
            style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
            className='d-flex justify-content-center align-items-center'
          >
            <MDBRow>
              <div className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'>
                <h1 className='display-4 font-weight-bold'>Lorem ipsum </h1>
                <hr className='hr-light' />
                <h6 className='mb-4'>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem
                  repellendus quasi fuga nesciunt dolorum nulla magnam veniam
                  sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
                  iste.
                </h6>
                <MDBBtn outline color='white'>
                  Learn More
                </MDBBtn>
              </div>
              <MDBCol md='6' xl='5' className='mb-4'>
                <MDBCard className='dark-grey-text'>
                  <MDBCardBody className='z-depth-2'>
                    <h3 className='dark-grey-text text-center'>
                      <strong>Write to us:</strong>
                    </h3>
                    <hr />
                    <MDBInput label='Your name' icon='user' />
                    <MDBInput label='Your email' icon='envelope' />
                    <MDBInput
                      label='Your message'
                      icon='pencil-alt'
                      type='textarea'
                      rows='3'
                    />
                    <div className='text-center mt-3 black-text'>
                      <MDBBtn color='indigo'>Send</MDBBtn>
                      <hr />
                      <MDBInput
                        type='checkbox'
                        id='checkbox'
                        label='Subscribe me to the newsletter'
                      />
                    </div>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          </MDBContainer>
        </MDBView>

        <MDBContainer>
          <MDBRow className='py-5'>
            <MDBCol md='12' className='text-center'>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
      </div>
    );
  }
}

export default ContactFormPage;

CSS:

#contactformpage .view {
  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
}

#contactformpage h6 {
  line-height: 1.7;
}

#contactformpage .form-check {
  margin-bottom: 0 !important;
}

#contactformpage i {
  color: #9e9e9e !important;
}

Best, Kuba

All good now!

Thanks very much for help.