Displaying a banner at the bottom of a React page

I need to display a banner with the text "All items..." on every page. Currently, I have set the position attribute to fixed, but the banner is aligned to the left and I want it to be centered horizontally instead. Below is my code snippet:

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};
`;

https://i.stack.imgur.com/4m0gz.png

htmlcssreactjsstyled-components

Answer №1

To enhance the visual appeal, consider placing the colored section within a nested div element.

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

The outer bar spans the entire width of the page, while the inner div is centered within it.

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

.bar > div {
  margin: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: ) Any assistance on this matter would ...

javascriptjquerycss

Trouble arises when attempting to import React JSX project/modules from npm into an AngularJS TypeScript module

In the process of developing a proof-of-concept React framework/library, I aim to create a versatile solution that can be utilized in both React and AngularJS applications. To achieve this goal, I have initiated two separate projects: - sample-react-frame ...

angularjstypescriptnpmwebpackreactjs

Ways to extend the waiting timeout from 30000 ms to 60000 ms for npm installation on Ubuntu

Due to the slow internet connection, I was unable to install packages from npm. The issue arose when npm returned an error stating: npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/create-react-app (over 30000ms) I thought tha ...

node.jsreactjsnpmcreate-react-appnpm-install

Linkify Method appearing in html.erb file displaying with HTML on the view

Apologies if this question seems basic, but I am encountering an issue when calling the following method on the @page instance variable. The view is displaying HTML tags instead of the desired content... module PagesHelper def linkify_page page rege ...

htmlruby-on-railserblinkify

Update the input field with information stored in a cache or local storage using HTML and React

Is there a way to automatically refill input field tags with cached or previous input when the page changes or reloads? I'm using a Redux store to cache the input. ...

reactjsreduxnext.js

In which part of the DOM tree are Event/Callbacks typically located?

As I work on creating a one-page web application, the task of dynamically constructing nested Backbone.View components arises. My typical approach involves building an empty jQuery object, populating it with div elements, binding events to it, and then re ...

htmljquerydomjquery-events

What is the best way to adjust text to a specific width on an HTML canvas?

Is there a way to adjust the width of a single-line text string precisely on an HTML5 canvas? My current method involves initially setting a font size, measuring the text's width using measureText(my_text).width, and then determining a new font size b ...

htmltexthtml5-canvasmeasurement

How to customize the preview grid design in material-ui-dropzone

I am working on a book form page in my React app which includes an option to upload a cover photo. I opted for material-ui-dropzone from https://yuvaleros.github.io/material-ui-dropzone/ and it's working well, but I encountered an issue with the previ ...

javascriptreactjsmaterial-ui

Avoiding the Popover Component from Covering the Screen When the Menu Component Opens in React Material UI

I have implemented a Menu component to display a menu upon hovering over an element. However, I have encountered an issue where the menu includes a Popover component that opens up and covers the entire screen as an overlay, preventing interaction with th ...

javascriptreactjsmaterial-ui

"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

My goal is to create two divs that each take up 6 columns with a space of 1px between them. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA ...

htmlcssbootstrap-4css-grid

Having trouble maintaining the original events on a cloned element

My goal is to duplicate an element passed into a function and retain all associated events, including ones like $('.example').on('click', function(e) ... )} that are defined within the document ready. Here's what I'm trying: ...

javascriptjqueryhtml

What could be causing my closing tag to abruptly end the section tag?

I encountered an issue that says the 'section' is closed by another tag. Upon reviewing my HTML code, everything appears to be correct. <ng-container *ngIf="display$ | async as display"> <section [class.open]="display ...

htmlangular

Exploring the Play Framework: Building basic HTML hyperlinks

I've been working on a website consisting of multiple HTML files and a CSS file, but now I'm looking to transition to the Play! Scala Framework. However, I’m facing difficulties in understanding how to connect one HTML page to another. Current ...

htmlscalaplayframework-2.0

Issues with JQuery Ajax rendering in browser (suspected)

I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...

javascriptjqueryhtmlajaxdom

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

jqueryhtmlslideup

What could be the reason behind my useEffect() not triggering when updating a value in a React context?

How come my useEffect hook doesn't trigger when I update a dependency that involves a React context? In my project, the context is used within a wizard to gather user data and then process it on the final step. I am able to update the "Person" fields ...

javascriptreactjsreact-hooks

Is XPath applicable to data that has been labeled?

I am looking to access the data within the second div: <div class="my-3"> <div class="d-flex justify-content-between">Monthly:</div> <div>0 / 30,000</div> </div> Within the code above, I want to t ...

htmlxmlxpath

What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution. The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second ...

htmlcsscross-browsercss-position

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

What is the best way to position an image using css?

I am looking to position an image on the left side of my homepage using CSS instead of HTML. However, I am having trouble figuring out how to make it work. The image I want to use is called Nobullying.jpg. HTML: <html> <head> <link re ...

htmlcss