CODEWITHSUNDEEP
htmlcssreactjsstyled-components
Shahrear Bin Amin
Shahrear Bin Amin

Reputation: 1135

Showing banner on bottom of page in react

I've to show a banner All items... in every page. I've used postion=fixed here but the banner is left aligned I need it centered horizontally. Here is my code

export const Bar = styled.div`
  position: fixed;
  bottom: 0px;
  z-index: 100;
  height: 5rem;
  background-color: ${(props) => props.theme.tile.backgroundColor};
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  font-size: ${(props) => props.theme.typography.mediumFontSize};
`;

enter image description here

Upvotes: 0

Views: 1042

Answers (1)

hyperdrive
hyperdrive

Reputation: 1846

You could put the coloured part in a child div.

<div class="bar">
    <div>Content</div>
</div>

The bar is 100% width of the page. And the one inside is centered within that.

.bar {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
}

.bar > div {
  margin: auto;
}

Upvotes: 1

Related Questions