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

Is it possible to generate HTML form fields with fixed positions when using Orbeon forms?

Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...

javascripthtmlformsorbeon

Design elements using CSS within the <th> tags

When working with HTML tables, the use of a <th> element allows for the implementation of a scope attribute. This attribute serves to indicate whether the header cell is associated with its subsequent column, row, or group. Is it feasible to leverage ...

htmlcsscss-selectorshtml-table

Troubleshooting problem with scrollbar in HTML table within a div element

I'm utilizing Bootstrap for the majority of my CSS. I've split a section into two columns, with the left column displaying a table with data and the right side featuring a Google map. The issue arises when the table row grows, as it doesn't ...

htmlcsshtml-table

I am looking to transfer the value of one textbox to another textbox within a dynamic creation of textboxes using JavaScript

var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form- ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Generating a JavaScript variable linked to a Rails Active Record relationship

I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...

javascriptjqueryhtmlruby-on-railsruby-on-rails-4

What is the optimal way for text selection to operate within a clickable component on a web application?

We're currently developing a web application with expandable/collapsible elements. Here's an example of one of the clickable items: https://i.stack.imgur.com/jdLOu.png The text selection behavior when clicking on the element is causing some an ...

htmlcssweb-applicationsweb

jmpress: Scrolling through Absolutely Positioned Element (Slide) with dynamic height

Check out the Live Site I'm currently working on a website using jmpress, but I'm facing difficulties in implementing scrolling functionality for my content. While I can scroll in Chrome by selecting text and dragging down, I want to achieve thi ...

cssscrollcss-position

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...

javascripthtmlcssvideozooming

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

jqueryhtmlcsstwitter-bootstrap

Hiding a specific tag with vanilla JavaScript based on its content

I am facing a challenge with my code that is supposed to hide div elements containing a specific word along with additional text. I have tried multiple solutions but none seem to work effectively. Any assistance on how to hide divs properly will be greatl ...

javascripthtmltypescript

Design an ARIA menu role with HTML and CSS code

Currently, my code is set up, but I'm unsure about integrating the tab/arrows to navigate to the sub-menu. You can view the code on jsfiddle: https://jsfiddle.net/Fep5Q/60/ This snippet shows a portion of the HTML code I've implemented: <di ...

htmlcsswai-aria

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

javascriptcssreactjsmaterial-ui

Having trouble with the Ajax load function not functioning in your HTML code?

The issue has been resolved. Thank you to everyone who helped! Initially, I was attempting to run a file offline instead of on a web server (XAMPP server). Once I uploaded the file to the web server, it started working properly. I had been trying to load ...

javascriptjqueryhtmlajaxxml

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

javascripthtmlcss

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

javascriptjqueryhtmljsonweb-deployment

Is there a way to prevent the node modules folder from being uploaded when deploying a React app on Github Pages?

Struggling with the lengthy upload time of my React app on Github Pages. Every attempt to upload the node modules folder feels like an eternity due to its numerous dependencies. I've considered uploading just the build folder (minified version), but i ...

javahtmlreactjsgithubnpm

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss