What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html:

<body>
<div>
    <img src="img/projectfly-logo.svg">
    <p class="center">We're upgrading!</p>
    <div class="center">
        <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
        <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Support the project</a></h1>
    <div>
</div>

I've also created a center class and defined styles for two different button classes:

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

You can view the output here:

htmlcss

Answer №1

Ensure both buttons have the same width and decrease the font size.

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 100px;
    font-size: 10px;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
    width: 100px;
    font-size: 10px;
}

.container{
    position: relative;
}

.center{
    position: absolute;
    top: 50%;
    left: calc(50% - 210px);
    color: white;
}
<body>
  <div class="container">
      <img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <p class="center">We're upgrading!</p>
      <div class="center">
          <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
          <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Support the project</a></h1>
      </div>
  </div>
</body>

Answer №2

To enhance the appearance of your buttons, consider applying a width and center alignment to the predefined classes:

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 300px;
    text-align: center;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
    width: 300px;
    text-align: center;
}

Answer №3

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    width: 100px;
    font-size: 11px;
}
a{text-decoration:none;}
.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    width: 100px;
    font-size: 11px;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
<div>
    <img src="img/projectfly-logo.svg">
    <p class="center">We're undergoing maintenance!</p>
    <div class="center">
        <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
        <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Show your support</a></h1>
    <div>
</div>

Answer №4

  • Avoid using inline elements to wrap block-level elements.
  • You can create a common button class for both buttons and add an additional class to define the background color difference.
  • This makes your HTML and CSS more semantic, as shown below:

.button{
    padding: 20px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 150px;
    text-align:center;
    margin:0 10px;
    color: #fff;
    text-decoration: none;
 }
 
 .background-grey{
    background: grey
 }
 
 .center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
    <div class="center">
        <a href="#" class="button">
          <i class="fas fa-bell"></i>
          <span> Update</span>
         </a>
        <a href="#" class="button background-grey">
          <i class="fab fa-paypal"></i>
          <span> Support the project<span>
         </a>
    <div>

Answer №5

Make sure to provide them with an equal width.

.button1,
.button2 {
  min-width: 250px !important;
  text-align: center;
  font-size: 18px;
  margin: 10px 15px;
  box-sizing: content-box;
}

.button1 {
  padding: 20px 60px;
  background-color: #00B056 !important;
  border-radius: 300px;
  display: inline-block;
}

.button2 {
  padding: 20px 60px;
  background-color: grey;
  border-radius: 300px;
  display: inline-block;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

a {
  text-decoration: none;
  color: white;
}
<p class="center">We're updating!</p>
<div class="center">
  <a href="#">
    <h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
  </a>
  <h1 class="button2"><a href="#"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</a></h1>
  <div>
  </div>

</div>
<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

Attempting to implement a basic AngularJS integration with Google Maps for a straightforward demonstration

I have a basic Google Maps project that I am trying to transition into an AngularJS project. This is all new to me as I am a beginner in both AngularJS and web development so please bear with me :) The project can be found at https://github.com/eroth/angul ...

javascripthtmlgoogle-mapsangularjsweb-applications

Is an audio player/playlist necessary for showcasing a mix engineer's skills in their

As a newcomer to the world of web development with some background knowledge from school, I work as a mix engineer and have created a portfolio website. Previously, I utilized Soundcloud and Spotify's API to showcase my mixes/songs, but the external J ...

javascripthtmlcss

The Bootstrap accordion-toggle incorrectly displays the content symbol (+/-) upon initial page load

Hey there, I've implemented the accordion-toggle code below on my visualforce page. Everything is working smoothly with the collapsible toggle, except for one issue. When loading or refreshing the page for the first time, the collapsed panel shows the ...

jquerycsstwitter-bootstrapvisualforce

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

Display the selected checkbox in the table

I am struggling to display the selected check value in a table. I am having difficulty in showing the check values corresponding to each row in the table based on my selected value. For instance, in the code snippet below, I have selected values as true,f ...

phphtmlcheckboxexplode

CSS3 keyframes hover animation for Firefox

I implemented keyframes animation for a div on mouse hover using pure CSS3. The animation runs smoothly on all browsers (Google Chrome, Safari, IE, Opera) except for Firefox! I'm puzzled as to why it doesn't work only in Firefox. The animation ...

cssfirefoxhoverkeyframe

Obtain the PHP function output through asynchronous JavaScript and XML programming

I have a form that collects user input and saves it to the database. After submitting the form, an ajax call is made to the action.php file. e.preventDefault(); $.ajax({ type: "POST", url: "action.php", data: senData, dataType: "JSON", ...

javascriptphphtmlajaxforms

Troubleshooting issues with mail subscriptions using Ajax and PHP

My Idea for Implementation I successfully set up a subscription form using PHP initially. However, I wanted to enhance the user experience by implementing an Ajax feature that would display a nice image and a "thank you" message without reloading the pag ...

phphtmlajaxformsmailchimp

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

javascriptjquerycsshtml

I am interested in utilizing Selenium to interact with a hyperlink within an HTML table

I am currently using the code snippet below to fetch data from the HTML structure provided: //findTables(driver); WebElement content = driver.findElement(By.id("tblTaskForms")); List<WebElement> elements = content.findElements(By.className("form-nam ...

htmlangularjsseleniumselenium-webdriver

Tips for extracting text from a textarea while retaining newline characters:

When using jquery, my goal is to retrieve the text from a textarea element with new lines represented as \n instead of br tags. However, I encountered an issue where Firefox debugger does not display the \n or br characters when I select it and r ...

javascriptjqueryhtml

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

My website features several lists that have this format: > lorem ipsum I am trying to style them like this: > lorem ipsum If anyone can provide guidance on how to rephrase the question I am asking, I would greatly ap ...

htmlcss

What are some effective strategies for arranging multiple collapsible Bootstrap panels in an organized and visually appealing

I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened. For example, when I open the first panel in my code, all other panels shift down and sta ...

csstwitter-bootstrapgrid

Get your columns in order with Bootstrap4

I need to rearrange my 3 columns on desktop and mobile devices in different ways. Currently, my grid structure is set up like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md- ...

csstwitter-bootstrapbootstrap-4grid

What are some effective methods for preventing CodeMirror from appearing as a blank white box upon initialization?

In my project with Codemirror version 5.62.3 and the 'monokai' theme set to a dark background, I am facing an issue where upon reloading the page, the CodeMirror initializes as a small white box before the proper styling is applied. I have attemp ...

cssloadingstylingcodemirror

Display the div only during the printing process

Imagine I have a situation where there is a block of content that I only want to show when printing. It looks something like this: <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div&g ...

javascripthtmlcss

In Internet Explorer 8, the Radmenu hover menu may appear below surrounding Radmenus

Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the curren ...

htmlcssinternet-explorertelerik

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...

jqueryhtmlformsjquery-mobilepopup

Hover over the div to center an SVG inside it

Simply put, I am working on a design where a gradient bar moves above a specific element when hovered, creating a visual effect of a triangle. I am now looking for a way to center an SVG inside the element on hover, to create a similar triangular gradient ...

javascriptjqueryhtmlcsssvg

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

javascriptjqueryhtmlcssdynamic-html