What is the best way to implement responsive input fields and buttons on my website?

I am in the process of creating my first website, and I am inspired by the Contact page design on this site(). Everything looks great until the screen size drops below 1000px - at that point, my button shifts to the right side and leaves some empty space on the left side of the site. While it is not fully responsive, it remains centered. Below are excerpts from my HTML and CSS:

body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.topper-header {
  padding-top: 50px;
  text-align: center;
  font-size: 250%;
  font-weight: 25;
  text-decoration: underline cyan;
}

.container {
  overflow: hidden;
  margin: auto;
}

#part4 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  padding-bottom: 100px;
}

.place-name {
  text-align: center;
  padding-right: 200px;
}

.row1 {
  font-size: 15px;
  margin-left: 20px;
  width: 230px;
  height: 30px;
  border-style: groove;
  border-radius: 3px;
}

.row2 {
  margin-top: 15px;
  border-radius: 3px;
  font-size: 15px;
  height: 30px;
  width: 490px;
  float: right;
  border-style: groove;
}

.row3 {
  margin-top: 15px;
  border-radius: 3px;
  border-style: groove;
  font-size: 15px;
  height: 100px;
  width: 490px;
  float: right;
}

#contact-input {
  margin-left: 50px;
  border-radius: 3px;
}

.row4 {
  font-weight: 10;
  border-radius: 3px;
  background-color: #00ced1;
  font-size: 20px;
  float: right;
  padding-right: 192px;
  border-radius: 3px;
  padding-left: 192px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 140px;
  margin-right: -500px;
}
<section id="part4">
  <div class="container">
    <h1 class="topper-header">CONTACT</h1>
    <div id="contact-input">
      <div class="first-row">
        <span class="place-name">Zagatala,Zagatala City,Azerbaijan</span>
        <input class="row1" type="text" placeholder="Name" required>
        <input class="row1" type="text" placeholder="Phone">
      </div>
      <div class="second-row">
        <input class="row2" type="email" placeholder="Email address">
      </div>
      <div class="third-row">
        <textarea class="row3" placeholder="Message"></textarea>
        <button class="row4">CONTACT US</button>
      </div>
    </div>
  </div>
</section>

htmlcss

Answer №1

The button in the code snippet initially has the property float: right; assigned to it within the .row4 class. I have made a modification by introducing a media query that changes it to float left.

body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.topper-header {
  padding-top: 50px;
  text-align: center;
  font-size: 250%;
  font-weight: 25;
  text-decoration: underline cyan;
}

.container {
  overflow: hidden;
  margin: auto;
}

#part4 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  padding-bottom: 100px;
}

.place-name {
  text-align: center;
  padding-right: 200px;
}

.row1 {
  font-size: 15px;
  margin-left: 20px;
  width: 230px;
  height: 30px;
  border-style: groove;
  border-radius: 3px;
}

.row2 {
  margin-top: 15px;
  border-radius: 3px;
  font-size: 15px;
  height: 30px;
  width: 490px;
  float: right;
  border-style: groove;
}

.row3 {
  margin-top: 15px;
  border-radius: 3px;
  border-style: groove;
  font-size: 15px;
  height: 100px;
  width: 490px;
  float: right;
}

#contact-input {
  margin-left: 50px;
  border-radius: 3px;
}

.row4 {
  font-weight: 10;
  border-radius: 3px;
  background-color: #00ced1;
  font-size: 20px;
  float: right;
  padding-right: 192px;
  border-radius: 3px;
  padding-left: 192px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 140px;
  margin-right: -500px;
}


/* Additional Style for Responsiveness */

@media (max-width: 1000px) {
  .row4 {
    float: left;
  }
}
<section id="part4">
  <div class="container">
    <h1 class="topper-header">CONTACT</h1>
    <div id="contact-input">
      <div class="first-row">
        <span class="place-name">Zagatala,Zagatala City,Azerbaijan</span>
        <input class="row1" type="text" placeholder="Name" required>
        <input class="row1" type="text" placeholder="Phone">
      </div>
      <div class="second-row">
        <input class="row2" type="email" placeholder="Email address">
      </div>
      <div class="third-row">
        <textarea class="row3" placeholder="Message"></textarea>
        <button class="row4">CONTACT US</button>
      </div>
    </div>
  </div>
</section>

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

The appearance of Google Font CSS may vary when retrieved using WGET

Uncovering an issue while attempting to dynamically fetch a Google Fonts css file to extract the font URL. The scenario looks like this: (Viewed in Chrome) Contrast that with: WGET -qO- http://fonts.googleapis.com/css?family=Droid+Sans Upon inspecti ...

csswgetgoogle-webfonts

Tips for achieving horizontal alignment of headers

My webpage has two headers positioned as 'CompanyName' on the top left and 'Date' at the top middle but I am struggling to align them horizontally. I attempted to enclose them inside a div element, however, this did not work. Can someon ...

htmlcssasp.net-mvc

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

javascriptjqueryhtmlcss

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

SELENIUM is unable to choose a name that is generated by JavaScript code

Hello, this is the HTML code I am trying to work with: <input type="text" name="input[220].pk[202].name['CODICE_ORDINE_OLO'].value" alias="" value="" pattern=".*" class="form-control form- ...

pythonhtmlselenium

Just beginning my journey with coding and came across this error message: "Encountered Uncaught TypeError: Cannot read property 'value' of null"

As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...

javascripthtml

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

javascripthtmlreactjs

Multiple occurrences of IP addresses in MySQL

Looking for assistance. I have categories and comments stored with IP addresses. I need to validate all categories for repeated IPs. For each user who uses the same IP twice, add a CSS class (red) to their name. If they use it three times, add another CSS ...

phpmysqlcssip

JavaScript: Deactivate radio buttons based on selected value

Utilizing radio buttons to schedule appointments in a PHP web application is my goal. Presented below is a selection of Radio Buttons, from which the user can pick one. The selected value will be stored in the database as an appointment date and time. &l ...

javascriptphpjqueryhtml

Despite locating the button, Protractor still encounters difficulties when attempting to click on it

I've been having trouble clicking on a button using Protractor. The issue is that even though the driver can locate the element, it still won't click on it. Any assistance would be greatly appreciated. Thank you in advance. Here is the HTML for ...

javascripthtmlxpathselenium-webdriverprotractor

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

jqueryasp.net-mvchtmlcheckbox

As each new line is added, the span text starts from the bottom and moves up by one line

I am facing an issue where I want a span to start from the top and expand as the text length increases, but it is currently starting from the bottom and moving upwards. See the image below for reference: View Image <div style="width:70%;margin-left: ...

htmlcss

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

jquerycssblink

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

jqueryhtmlcss

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

javascriptjqueryhtmlcss

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

javascripthtmljquerycssbootstrap-5

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...

htmlcssflexboxfrontend

The functionality of the offcanvas button is not working correctly

I am currently utilizing the newest Bootstrap version of Offcanvas. Interestingly, there seems to be an issue with the close button functionality. When I click the "Add to Cart" button, the offcanvas displays properly. However, the "Add to Cart" button its ...

htmlcsstwitter-bootstrapbuttonbootstrap-5

Display detailed images upon hovering

Top of the morning to everyone. I'm in search of a way to display higher resolution images when hovering over lower resolution ones. I want to create a rule or function that can handle this dynamically without manually adding hover effects and changi ...

javascriptjqueryhtmlcssimage

Flexbox: Arrange header and footer in a sidebar layout using flexbox styling

In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop. I have already implemented this using floats ...

htmlcssflexbox