What is the best way to ensure the box div is centered responsively?

Here is the code for my HTML file:

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  width: 1000px;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}
button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

I am looking for advice on how to horizontally align the box div in a responsive manner and make this webpage fully responsive. Currently, when I check the responsiveness of this page, it does not adapt properly. Can you assist me with achieving this?

htmlcssweb-deploymentgoogle-web-designer

Answer №1

Give this code a try:

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}
button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>
What I have modified is that I replaced the

.box {
  width: 1000px;
}

with

.box {
  max-width: 1000px;
  width:100%;
  margin:0 auto;
}

You can also utilize display: flexbox; and justify-content: center; in the box div for similar results

Here is an alternative code utilizing flexbox:

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  display: flexbox;
  justify-content: center;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}
<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

NOTE: In my initial method, I used max-width: 1000px;, feel free to adjust it as needed.

Answer №2

Revise this

.container{
  max-width: 1200px;
  width:100%;
  margin:0 auto;
}

Answer №3

To achieve this, ensure that your parent div has a width of 100% (equal to the window width).

Alternatively, you can utilize flex.

form{
    width: 200px;
    margin: auto;
}
<body>
<h1>This is my page title...</h1>
   <div class="box">
       <form>
            <input type="text" name="" placeholder="Search here">
            <button type="button">Search</button>
       </form>
   </div>

</body>

Answer №4

Feel free to reference the code below. I have provided explanations for my changes.

  body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 0px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  /* For responsive design, use percentage width instead of fixed size */
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* Ensuring form responsiveness */
.search-form{
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 70%; /* Changed from pixels to percentage based on requirement */
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
  float: left; /* Aligned input field to the left */
}
button {
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 30%; /* Adjusted width to percentage based on requirement */
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
  float: left;  /* Aligned button to the left */
}
<h1>This is my page title...</h1>
<div class="box">
  <div class="search-form">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>
</div>

Answer №5

display: block repair requires inserting these two blocks into the CSS

.box {
  max-width: 1000px;
  margin: 0 auto;
}

form {
  width: max-content;
  margin: 0 auto;
}

Functioning Demo

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  max-width: 1000px;
  margin: 0 auto;
}

form {
  width: max-content;
  margin: 0 auto;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}

button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

If you prefer using flexbox, you can wrap your .box in flex and use justify-content: center; for horizontal alignment.

Add this update to your CSS for flexbox

.box {
  display: flex;
  justify-content: center;
}

Working Example with Flexbox

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  max-width: 1000px;
  display: flex;
  justify-content: center;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}

button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

Note: I have used max-width: 1000px; for .box in both examples to ensure UI consistency. You may adjust as needed.

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 there a way to organize a specific column based on user selection from a drop down menu on the client side?

When selecting Timestamp from the drop-down menu, I expect the TimeStamp to be sorted in either ascending or descending order. Similarly, if I choose Host, the Host should be sorted accordingly. Despite using the Tablesorter plugin, sorting doesn't s ...

javascriptjqueryhtmltablesorter

Try incorporating the <code> tags or a similar method in ReactJS when using JSX

I've been experimenting with ReactJS and JSX to develop a prototype for a styleguide. One issue I encountered is that JSX seems to be ignoring my <code> tags, instead of displaying the raw HTML code needed to call components. Here's what ...

htmlreactjsblockquote

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

Below is a list with customized styling: ol { background: #ff9999; padding: 20px; list-style-position: inside; } ol li { background: #ffe5e5; padding: 5px; } <ol> <li>Coffee</li> <li>Tea</li> <li>Coca ...

javascripthtmlcssstylesheet

Distinguishing between a video or image when uploading files in JavaScript

I've been researching whether JavaScript can determine if a file is a video or an image. However, most of the information I found only shows how to accept these types using the input tag. What I really need is for JS to identify the file type and the ...

javascripthtmljquerycss

Obtaining the text content of a <div> element when clicked using Selenium

I am trying to extract the email address from the code snippet below, but I am unsure of how to do it. Any assistance would be greatly appreciated! <div class="taLnk hvrIE6 fl" onclick="ta.trackEventOnPage('Listing', 'Email', 774169 ...

javascriptjavahtmlselenium

Retrieve the site's title content using PHP

I created a code to scrape website content from platforms like Facebook and Google+. $html = file_get_contents_curl($url); if ($html) { //parsing begins here: $doc = new DOMDocument(); @$doc->loadHTML($html); $nodes = $doc ...

phphtmlregexdomcurl

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

What is the reason behind the addition of right padding to texts containing non-ASCII characters?

Upon observation of the image below, it is evident that text containing non-ASCII characters tends to be pushed away from the right margin, while text with emojis is pushed closer to the margin. Have you ever wondered why this happens? https://i.stack.img ...

htmlmargingraphviznon-ascii-characters

Scrollbar issue and splitting line in half

I am writing some CSS code below. I am trying to achieve horizontal scrolling, but if the sentence is too long, it breaks and displays on the next line. In the image, I want "aaaa.." to be displayed on only one line and "bbb.." on the second line, ...

htmlcssscrollbar

Toggle classes on button click

<div class='fixed_button homes hidden'> <a class='btn btn-primary homes'>Continue &rarr;</a> </div> Using jQuery Library $(".homes").on('click', function(){ $("choose_style").addClass(&apo ...

javascriptjqueryhtml

How to locate an element in Webdriver/Selenium when it lacks a class name, id, or css selector?

Within the search results displayed in groups of 7, you can find the address and phone number for each entry on the right side as follows: I need to extract both the address and phone number for each result. The challenge lies in how these elements are st ...

pythonhtmlseleniumselenium-webdriverwebdriver

Setting the initial position for an SVG path

Working on a unique loading animation with 3 shapes that will scale as they follow a path. Each shape begins from a different starting point but follows a similar path. Shapes and paths were created in Illustrator and exported as SVGs. See below for an exa ...

csssvgcss-animations

Stop the color buffer from being automatically cleared in WebGL

Removing gl.clearColor(c[0],c[1],c[2],1.0); gl.clear(gl.COLOR_BUFFER_BIT ); does not stop the screen from getting cleared at the start of the next draw cycle. Is there a method to avoid this situation? I am aiming for an overpaint effect. ...

htmlwebgl

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

cssreactjstypescriptmaterial-uifrontend

Unable to integrate an if/else statement into the JSON reply

Working with an API to retrieve data and display images from it. I am attempting to implement an if/else statement that will show photos if the search term yields results in the response, and display a message indicating no results if it does not. Curren ...

javascriptjqueryhtmljsonapi

Align an image in the center vertically within a left-floated div with a minimum height

I am currently attempting to vertically align an image within a div that is positioned to the left, and has a minimum height of 150 pixels. The issue I am facing is that none of my attempts seem to be successful. I have tried various methods, including ut ...

htmlcss

Is there a different option available in place of the JavaScript confirm function?

I developed an application where I heavily utilized the javascript confirm function. confirm("Do you want to proceed"); However, I am not satisfied with the default appearance of the confirm dialog and would like to implement a customized version with be ...

javascriptjqueryhtmlconfirm

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

javascripthtmlformattingline-breaks

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...

jquerycssajax

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

javascriptcssgoogle-mapsreactjsgoogle-maps-markers