Ensure that the distance between the text, text field, and button remains consistent

Click on this link

Use CTRL + F to search for "check", then you will see:

https://i.sstatic.net/i2zYK.png

I would like it to be displayed like this as link2

https://i.sstatic.net/aahgq.png

I have 4 requested changes below.

1) Change the font-size and font-family of the text "check availability at".

2) Ensure the gap between text, textfield, and button is consistent.

3) When entering numbers in the textfield, add a bit of space at the beginning as shown in link 2.

4) Hide the empty gap between the block above and below.

.shipping-estimation-form {float: left;margin: 0 auto;padding: 0;width: 50%;}
.check_delivery .actions {float: left;width: 25%;}
.check_delivery .f-right {margin-left: 0 !important;}
.check_delivery .f-right, .right {float: left !important;}
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;}
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;}
.check_delivery .item.last.odd { padding: 0;}
.check_delivery .block-subtitle {float: left;margin-top: 10px;padding-left: 10px;  width: 21%; font-size:12px; position:relative;left:50px;}
.check_delivery #estimate_postcode {margin: 0 auto !important;padding: 0 !important;width: 50% !important; position:relative; left:100px;}
.check_delivery .search {margin: 0 auto !important; width: 100%;}

.check1 {
    float: left;
    text-align: center;
    width: 90%;
    font-size: 17px;
}

.ikon {
    position: relative;
    top:50px;
}

Answer №1

.track_delivery .section-title {
float: left;
margin-top: 10px;
padding-left: 10px;
width: 21%;
font-size: 12px; // adjust size
position: relative;
left: 50px;
font-family: fantasy or (any font family);
}

.track_delivery #check_zip {
margin: 0 auto !important;
padding: 0 !important;
width: 50% !important;
position: relative;
left: 60px; // modify it
}

The submission button for tracking is not formatted correctly. Transform it into a submit button and add proper margins.

Answer №2

Kindly update the following css:

.check_delivery .block-subtitle {
  display: inline-block;
  float: left;
  font-family: Roboto,Helvetica,arial,sans-serif;
  font-size: 16px;
  margin-top: 8px;
  padding-left: 70px;
  width: 25%;
}

.shipping-estimation-form {
  float: left;
  margin: 0 auto;
  padding: 0;
  width: 35%;
}

.check_delivery #estimate_postcode {
  float: left;
  margin-bottom: 0 !important;
  margin-left: 15px !important;
  margin-right: 15px;
  margin-top: 0 !important;
  padding: 0 0 0 15px !important;
  width: 75% !important;
}

Answer №3

For block elements to behave like text, consider using the "display: inline-block" property.
To adjust the spacing between words (and blocks if they're set to inline-block), try utilizing the "word-spacing: 10px" property.

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

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

Maintaining the style of `li` elements within a `ul` list while ensuring they all

Struggling to create a menu list item with 4 items that won't fit on one line? Nested divs didn't work when adding padding. Here is my latest HTML and CSS: HTML: <div id="header"> <ul id="menu"> <li><a href="#"& ...

Is there a way to open an HTML file within the current Chrome app window?

Welcome, My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress: background.js chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('backstage.html', { ...

Issues with Bootstrap slider functionality : Unable to initiate slider as it is not being recognized as

I'm having an issue with my Bootstrap slider not functioning properly. Despite ensuring that all CSS and JS files are loading correctly in my HTML, I keep receiving an error in the console stating: slider is not a function. I have even downloaded the ...

How to notify when the value of multiple inputs changes using an Angular repeater

I am currently utilizing Angular to generate multiple inputs based on user needs. Although this approach works well, I am struggling to implement a simple alert that would display the values of these inputs. I have managed to retrieve the input values wi ...

Step-by-step guide to making a button appear on the second page

<html> <head> <title>Embark on the ultimate gaming adventure</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </ ...

"Discover the simplicity of customizing Bootstrap 5 with an easy-to-use online tool

When I was using Bootstrap 3, there was a convenient tool that allowed me to customize which features I wanted in the minified CSS/JS files to improve loading time. Now, as I delve into the documentation for Bootstrap 5, I find myself struggling to unders ...

I'm having trouble getting my accordion menu to work properly. Whenever I click on the question title, the answer doesn't seem to show up or collapse. What could be causing this issue?

I am currently working on a project to create an accordion menu where the answers are hidden and only revealed upon clicking the question. However, when I test it out, nothing happens when I click on the question. Here is my code: .accordion-Section ...

What is the recommended way to set up a grid system?

After creating a prototype of a landscape design, the next step is to code it using HTML5 & CSS. To create a responsive layout, I have chosen to utilize grids. Below is the structure that I sketched on paper before diving into coding. However, I am uncert ...

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

The behavior of Bootstrap 5 containers varies depending on whether they are located within a row

Have you noticed the difference in maximum width between Bootstrap 4.6 and Bootstrap 5? It seems that containers have a 1320px max-width in Bootstrap 4.6, whether inside or outside a row. However, this is not the case in Bootstrap 5 and I couldn't fin ...

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

Avoid displaying images that have not completely loaded

My website has a feature that displays user data, including various types of images such as Personal and Learning. To showcase these images, I have implemented a Modal with an img tag. One issue I have encountered is that there is only one Modal and one ...

Performing a while loop to iterate through the data for the second

After spending hours on this code and consulting a friend, we are both stuck trying to find a solution. We are working on a script that displays reviews based on descending IDs pulled from a database. The script implements an endless scroll feature to el ...

jQuery-powered one-page site - Information in HTML or JavaScript

I am currently learning JavaScript and jQuery, with a strong grasp on HTML/CSS. I am working on developing a single-page front-end website using Bootstrap for layout design. My main focus now is on implementing functionality. Here is the scenario: There a ...

PHP AJAX fetching repeated data from an external PHP script

I've been searching high and low for a solution to this problem, hoping that someone can lend a helping hand. I have some ajax/JS code along with an external PHP file which I call below, and then there's an index.php page where the results are di ...

"Exploring a different approach to implementing tooltips in Material Design Lite without using id selectors

As I plan to use a list of tooltips repeatedly on the same page, I am looking for a more efficient way to apply one tooltip to multiple elements rather than creating duplicates just to match IDs. For example: <p><span class="desc-mdl">MDL</ ...

Issues with zoom functionality on absolutely positioned image

My goal is to zoom in on an image that is contained within a div element. Upon page load, I display a 300x300 pixel image inside a 400x400 pixel div. To center the image within the div, I am using the following CSS: #img1{ width:300px; height:300px; ...

Utilizing unique background images tailored to different screen resolutions

In order to enhance the user experience on my website, I am looking to implement a feature that dynamically changes the background images based on the user's screen resolution. My plan is to use a small snippet of JavaScript within the <head> s ...

Saving several inputs with incremented values

I'm facing an issue with saving data from multiple input fields in a for loop: <input type="number" name="device_id_1"> <input type="number" name="device_id_2"> ... <input type="number" name="name_1"> <input type="number" name="n ...