What is the best way to incorporate a fixed-position button that spans the full width of the screen?

After trying numerous solutions on stackoverflow, I have yet to find one that works for me.

a.buttongc {
  border-radius: 5px;
  background: #f5b220;
  color: #fff;
  font-size: 17px;
  height: 44px;
  line-height: 42px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  white-space: nowrap;
  margin: 10px;
  text-overflow: ellipsis;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  display: block;
}

.gc-button-center {
  position: fixed;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  bottom: 50px;
  z-index: 999999999;
}
<div class="gc-button-center">
  <a href="#" class="buttongc startgc">test</a>
</div>

https://i.sstatic.net/1zOQI.png

The issue I'm facing is with setting margins that are only affecting the left side and causing the button to extend over the scrollbar. Any ideas for a solution?

htmlcss

Answer №1

Simply remove the width: 100% line if your display is set to block. Without specifying a width, it will automatically adjust to fit its parent container.

    a.buttongc{
    border-radius: 5px;
    background: #f5b220;
        color: #fff;
    font-size: 17px;
        height: 44px;
        line-height: 42px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        white-space: nowrap;
    margin:10px;
        text-overflow: ellipsis;
        font-family: inherit;
        cursor: pointer;
    overflow:hidden;
      display: block;
        
    }
    
    .gc-button-center{
      position:fixed;
      left:0;
      right:0;
      display:block;
      width: 100%;
      bottom: 50px;
      z-index:999999999;
    
    }
    <div class="gc-button-center">
    <a href="#" class="buttongc startgc">test</a>
    </div>

Answer №2

Modify the width: calc(100% - 20px); property to subtract margin 

a.buttongc{
    border-radius: 5px;
    background: #f5b220;
    color: #fff;
    font-size: 17px;
    height: 44px;
    line-height: 42px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    white-space: nowrap;
    margin:10px;
    text-overflow: ellipsis;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    overflow:hidden;
    display: block;

}

.gc-button-center{
  position:fixed;
  left:0;
  right:0;
  display:block;
  width: calc(100% - 20px);
  bottom: 50px;
  z-index:999999999;

}
<div class="gc-button-center">
  <a href="#" class="buttongc startgc">test</a>
</div>

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

Creating a dynamic form field using JavaScript

I'm struggling with a JavaScript issue that requires some assistance. I have a form sending an exact number of inputs to be filled to a PHP file, and now I want to create a preview using jQuery or JavaScript. The challenge lies in dynamically capturin ...

javascriptphpjqueryhtml

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...

cssmaterial-ui

What are the steps to create two frames using Twitter Bootstrap?

I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Regular expression to limit a string to a maximum of 5 consecutive numeric characters and a total of up to 8 numeric characters

I need help creating a regex pattern that limits a string to no more than 5 consecutive numeric characters and a total of 8 numeric characters. Here are some examples: 12345 => True Yograj => True Yograj1234 ...

javascripthtmlregexvalidationinput

Unable to load module/controller file from Angular 1 into view/html

var app = angular.module("appModule",[]); app.controller("viewController",function($scope){ $scope.greeting = "Welcome to the future"; }); <html> <head> <script src="Scripts/script.js"></script> <script ...

javascriptjqueryhtmlangularjs

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

The phenomenon of IE6 Float Drop

Having a bit of trouble with IE6; typically I'd just drop support for it, but there's a chance that many visitors will be using it on this project. If you have IE6 and want to see the issue, check out my Home Page link. The problem is that div#c ...

cssinternet-explorer-6

HTML: Body with a larger height than its actual content dimensions

My Chrome browser extension seems to have a body that is much taller than its actual content: https://i.sstatic.net/t44t6.pnghttps://i.sstatic.net/8WjzD.png Even though there are no other parent div elements, the height of the <div id='app'& ...

javascriptcssgoogle-chrome-extension

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

Transforming iframe programming into jquery scripting

Currently, I have implemented an Iframe loading the contents within every 5 seconds. It works well, however, there is a consistent blinking effect each time it loads which can be quite bothersome. I am looking to replace the iframe with a scrolling div so ...

javascriptphpjqueryhtmliframe

Why does PHP seem to be rushing to insert data before I even click on the

I am new to PHP and SQL, so I have tried to connect my form to the database using various templates and examples. However, I am facing an issue where the record is being created in the database on page load before I even input data and press submit. I am ...

phphtmlsqlforms

Duplicate table row and insert new cell

I am currently attempting to duplicate a row from one table into a new table and then include an additional td at the end of the copied row containing a delete button. Thus far, I have successfully duplicated the row but am struggling to find a method for ...

jqueryhtmlcss

Extract image styles from a different webpage

My website is located at: I'm attempting to replicate the testimonial photo effect that can be seen on this website: https://i.sstatic.net/70Jqd.png What CSS code do I need to include in order to make the image with the class "client-pic" circula ...

htmlcss

Is it better to choose AJAX and JQuery for their speed and complexity, or stick with the simplicity of GET requests?

When a user attempts to log in and fails, an error message should be displayed on the page. There are two primary methods that can be used to achieve this: one involves using a form action on the HTML page and handling incorrect login information in the PH ...

phpjavascriptjqueryhtmlajax

Listening for select elements that have remained unchanged

My current situation involves a select box with predetermined options. One of these options is preselected when the page loads: <select name="select" class="js-choice-select"> <option value="option-1">Option 1</option> <option ...

javascriptjqueryhtml

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Send information from Node.js to the webpage and populate designated elements (search by either ID or class) on the webpage

After successfully retrieving data from the mongo database using nodejs, my goal is to display this data on a webpage. function requireUser(req, res, next){ //console.log(req.session.username); if (!req.session.username) { res.redirect('/user_un ...

node.jshtmlmongodbexpress

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

htmlcss