What is the best method for eliminating buttons and text in a row using CSS?

I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button.

Here are my CSS snippets:

.google-button {
  color: white;
  border: none;
  width: 110px;
  height: 40px;
  border-radius: 3%;
  top: -10px;
  left: 5px;
  position: relative;
}

.alternative-sign-in-buttons {
  position: relative;
  margin-right: 5px;
}

.telephone-number-btn {
  width: 41%;
  height: 50.3px;
  position: absolute;
  margin-left: 15px;
  left: 61%;
  bottom: 18%;
}

.deneme {
  font-size: 14px;
  
}

And here is how I structured the HTML:

<div className="alternative-sign-in-buttons">
        <GoogleAuth />
        <button className="telephone-number-btn">
          <p className="deneme">Sign in with telephone number</p>
        </button>
        </div>

Click on this link to view the image of the codes: https://i.sstatic.net/rDzyW.png

Answer №1

To implement this code, apply it within the CSS selector ".telephone-number-btn". In other words:

.telephone-number-btn {
  display: flex;
  align-items: center;
  width: 41%;
  height: 50.3px;
  position: absolute;
  margin-left: 15px;
  left: 61%;
  bottom: 18%;
}

Answer №2

When you apply position: absolute, you are essentially taking the element out of the normal HTML flow. For more information on this concept, check out this informative source.

I have put together a straightforward form using HTML and CSS in react on codesandbox, which you can use as a starting point.

By turning the buttons container into a flex box, you can easily manage the positioning of the buttons.

Answer №3

Are you looking to center the text "Sign in with telephone number" inside the button?

To achieve this easily, I centered it using the following code. Additionally, I noticed that your Google button on the left had a greater height, so I adjusted the height to 40px to make them both equal.

    .telephone-number-btn {
      display: flex;
      width: 41%;
      height: 40px;
      align-items: center;
      justify-content: center;
    }

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

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Currently, I am integrating the community js library version of jsplumb with my Angular 5 application (Angular CLI: 1.6.1). Upon my initial build without any modifications to tsconfig.json, I encountered the following error: ERROR in src/app/jsplumb/jspl ...

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

Modifying the position of an image in Flask

I am trying to center an image on my webpage and have attempted the following code: <image height="300px" width="300px" src="{{url_for('static',filename = 'img/Rasd.jpeg')}}" > Visit this webpage fo ...

Tips for extracting information from Firebase and showing it on a Google gauge chart

I'm having some trouble displaying data from Firebase on a gauge chart. I keep getting an error that says "Uncaught (in promise)". Here's the JavaScript code I've been working with: <script type="text/JavaScript"> google.ch ...

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

Tips for leveraging async and await within actions on google and API integration

Currently, I am developing an Actions on Google project that utilizes an API. To handle the API calls, I am using request promise for implementation. Upon testing the API call, I observed that it takes approximately 0.5 seconds to retrieve the data. Theref ...

What is the best way to dynamically identify the property names of my object?

let weekData = []; for (let i = 0; i < 7; i++) { const weekdayName = moment().subtract('days', i).format('dddd'); weekData.push({ [weekdayName]: 0 }); } I'm trying to create a list of objects with dynamic pr ...

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

Switching sub components based on routing through navigation links after logging in

I'm having an issue with my routing setup while transitioning from the login page to the main page. Here's how my Routes are structured: App.jsx <BrowserRouter> <Routes> <Route path="/main/" element={<Main ...

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Bootstrap 4.1 Is there a way to get rid of the blue border on a checkbox that shows up when it is in focus? https://i.sstatic.net/e77BV.png I attempted to use outline, but it didn't work as I had hoped. This is the code I have been using: <div ...

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme? In my App.js root file, I have defined a custom theme and want t ...

Creating a JSX.Element as a prop within a TypeScript interface

I need to create an interface for a component that will accept a JSX.Element as a prop. I have been using ReactNode for this purpose, but I am facing issues when trying to display the icon. How can I resolve this issue? export interface firstLevelMenuItem ...

The function is invoked numerous times

My issue involves using jQuery to handle the mouseenter and mouseleave events. The problem arises when transitioning from one div to another, causing the events to trigger again. I am looking for a solution to only run these events once per mouse enter and ...

Unusual css glitch observed when hovering over a span/link

Currently, I'm struggling with a CSS code issue. My goal is to have the div #hidden show when someone hovers over the link in #trigger. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ...

A small space underneath the <a> element nested within a <li> tag within a navigation bar

As a new programmer, I am currently working on creating a navbar. However, I have encountered an issue where there are small gaps underneath the user when my cursor hovers over it. There is a white gap under the user element. I expect that the hover back ...

Looking for assistance with creating a D3 bar chart that involves selecting a specific year and crime category? Let me help

I am still learning D3 and I'm facing a challenge while trying to create a bar chart. My idea is to first select the YEAR radio button, then choose the CRIMEHEAD option, and finally the bar chart should be displayed. Here's my thought process: I ...

Java Script Custom Print Preview: A unique way to showcase your content

Is there a way to create a custom print preview dialog similar to the browser's print preview using Java Script? I am working on a book reader application that requires customization of the print preview dialog for page counting, automatic pagination, ...

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

What is the best way to verify reCAPTCHA v2 on an HTML website?

The code I'm using is giving me an error when the page loads: Cannot connect to reCAPTCHA. Please check your connection and try again. Just a reminder, I won't be incorporating any server-side code on my website. It's a simple HTML setup ...