ReactJS and CSS rendering

Question

So I was designing a web app using React and I'm stuck on this issue. Given below is what is being rendered

As I've highlighted using the red rectangle, there is a cut off region in my footer component. I'm not sure what is causing this. The CSS and Component code is as given below

import styled from 'styled-components';

export const Background = styled.section`
    background: black`;

export const Column = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 50px; 
    margin-top: 50px;`;

export const Row = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;`;

export const Text = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Footer Component

import React from 'react';
import { Column, Row, Background, Text } from './FooterStyles';

function Footer(props) {
    return (
        <div>
            <Background>
                <Row>
                    <Column>
                        <Text><h1>Developed By</h1></Text>
                        <h3>Erwin Smith</h3>
                        <h3>Peter Jackson</h3>
                        <h3>Tommy</h3>
                    </Column>
                    <Column>
                        <h1>About US</h1>
                    </Column>
                </Row>
            </Background>
        </div>
    )
}

export default Footer;

A solution to work around this issue is much appreciated.

If you r using bootstrap try creating a custom class with margin-left,right -15px n overflow-x: hidden to body — Kunal Vijan
– Kunal Vijan, Commented Dec 24, 2020 at 13:11
Adding a negative margin actually worked, do you know why the issue was caused? — Nimrod
– Nimrod, Commented Dec 24, 2020 at 13:21
bootstrap have a default margin of 15px both sides so, sometimes or most of the times -ve do wonders — Kunal Vijan
– Kunal Vijan, Commented Dec 24, 2020 at 13:52

Kunal Vijan · Accepted Answer · 2020-12-24 13:51:17Z

1

If you r using bootstrap try creating a custom class with margin-left,right -15px n overflow-x: hidden to body

answered Dec 24, 2020 at 13:51

Kunal Vijan

4572 gold badges10 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahdi · Accepted Answer · 2020-12-24 13:18:48Z

0

The defaults properties and values for a body tag are:

body { display : block; margin : 8px; }

so I think you should set that margin to 0.

this is just my guess because you haven't provided so much information and this is all I can say.

answered Dec 24, 2020 at 13:18

Mahdi

1,4051 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

ReactJS and CSS rendering

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related