Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn">
                        <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" method="post">
                            <div class="subscribe__action--active">
                            <input class="subscribe__input" type="email" id="emails" name="emails"
                                placeholder="Enter email">

                            <input type="button" class="subcribe__btn" name="subcribe__btn" value="Send">
                        </div>
                        </form>
                    </div>
            </section>

demo (with css): https://codepen.io/FilipoV/pen/LYWgeVm

htmlcssbutton

Answer №1

For consistent height regardless of padding, content, and border height, apply box-sizing: border-box;. To align elements in a row with no spacing, add display: flex to the parent div.

.subscribe__form--action--btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.subscribe__action--active {
  display: flex;
}

.subscribe__input {
  width: 280px;
  height: 60px;
  border-radius: 2rem 0 0 2rem;
  text-align: center;
  border: none;
  background-color: #000;
  box-sizing: border-box;
}

.subcribe__btn {
  width: 140px;
  height: 60px;
  border-radius: 0 2rem 2rem 0;
  font-size: 1.2em;
  border: none;
  margin-left: -4px;
  transition: 0.2s;
  background-color: #29bb89;
  box-sizing: border-box;
}
<div class="subscribe__form--action--btn">
  <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c8cbd6c1c9e4c8cbd6c1c98ac7cbc9">[email protected]</a>" method="post">
    <div class="subscribe__action--active">
      <input class="subscribe__input" type="email" id="emails" name="emails" placeholder="Enter your email">

      <input type="button" class="subcribe__btn" name="subcribe__btn" value="Submit">
    </div>
  </form>
</div>
</section>

Answer №2

Include the following css reset:

* {
  box-sizing: border-box;
}

Transfer flex to subscribe__action--active:

.subscribe__action--active{
   display: flex;
    justify-content: center;
    align-items: centre;  
}

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

D3.js: Unveiling the Extraordinary Tales

I'm currently working on a project that requires me to develop a unique legend featuring two text values. While I have successfully created a legend and other components, I am facing difficulties in achieving the desired design. Specifically, the cur ...

javascripthtmld3.js

Child Theme setup in progress! Beware of the error message: "Unable to access file: file_get_contents9(). The specified stream does not exist."

I am currently in the process of developing a child theme based on my existing theme (Tesseract 2). I have carefully followed the guidelines outlined here, but unfortunately, I keep encountering the following error: Warning: file_get_contents(/home/fletch ...

phpcsswordpress

Is it possible to swap two classes with each other using jQuery?

I am trying to implement a tree view with the following code snippet. Within the tree view, there are spans that have either the CollOpen or CollClosed class assigned to them. How can I toggle between these two classes on click for each span? .tree ...

jqueryhtmlcss

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

htmlyii2radiobuttonlist

What is the best way to trigger the download of an image file created by PHP to a user's computer?

My PHP code (upload.php) allows users to upload an image from index.html, resize it, add a watermark, and display it on the same page. Users can download the watermarked image by using the 'Save image as...' option. The resized image is saved in ...

javascriptphpjqueryhtmlimage

Leveraging JavaScript for pricing calculations within asp.net framework

I am currently working with a textbox in a gridview and trying to calculate values using JavaScript. My code seems to be error-free. The goal is to multiply the quantity by the rate to get the total price. function totalise(price, rate, qt) { var qt ...

javascripthtmlasp.netgridviewonblur

Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Seeking assistance with creating a function that will add a 'sticky' class to the menu when the user scrolls down to the middle, and then append a div when the 'sticky' class is present. Currently facing issues where the div keeps appen ...

javascriptjqueryhtmlcss

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows: .dropdown{ font-size: 20px; background: white; border:none; position: relative; } While the dropdowns appear fine in Chrome, there seems to be a slight differen ...

htmlioscssiphonesafari

generating dynamically evolving controls within the MVC framework

I am looking to dynamically create controls in a view based on the source. For example, if the type is a text box, I want to generate a text box; if it is a check box, I want to create a check box dynamically in MVC. Below is the snippet of my current code ...

htmlasp.net-mvc-4razorgeneratorrazor-declarative-helpers

Tips on how to toggle the class of one specific element without affecting others

Whenever I click on a div, it expands. However, if I click on a collapsed one, both collapse and the first one returns to an inactive state. At this point, the last two are in both active and inactive states. And if at this time I click on the first one, t ...

javascriptjqueryclasshtml

Break apart animation similar to the 🎊 emoji using CSS styling

I am attempting to create an animation of a circle splitting open on two sides, similar to the ...

htmlcsscss-animations

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

I am in need of a Centered Logo using Bootstrap fixed top navigation. The goal is to have the brand centered within the navigation. Check out my Sample Fiddle .LandPageNavLinks { list-style-type:none; margin:0; padding:0; } .LandPageNavLin ...

htmlcsstwitter-bootstrap

Ways to ensure your Javascript code only runs based on the specific browser

I need a Javascript code to run depending on the browser version. Specifically, if the browser is not IE or is IE 9+, one piece of Javascript should be executed. If the browser is IE8 or lower, another piece of Javascript should be executed. My attempt to ...

javascripthtmlinternet-explorer

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

htmlcssvue.js

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

jquerycss

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Hey there! So, I've got this cool interactive banner on my website. It features 2 slider sections with some awesome products on the right side. The layout is responsive, meaning that when you switch to a mobile screen size (around 515px or less), the ...

javascriptjqueryhtmlcssresponsive-design

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

Centering a Font Awesome icon within its parent element

Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...

cssfont-awesome

Using jQuery to alter the background position of multiple backgrounds in CSS

I'm using jQuery to dynamically adjust the background image position of an element based on screen resolution. Here's the code: var pwwidth = $(window).width(); var pwheight = $(window).height(); var bg1posx = pwwidth - $('h1.portofolio&ap ...

jquerycssbackground-positionbackground-image