Adjusting the spacing between buttons to accommodate the size of the page

Is there a way to dynamically adjust the spacing between 3 buttons based on screen size without changing their original size? I want the buttons to maintain their size while adjusting the space between them. Any ideas are welcome!

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
... (CSS code continues)</questionbody>
<exquestionbody>
<div class="question">
                
<p>Is it possible to have the 3 buttons below spaced to fit any size page? I want to keep the same button size, just making the space between the buttons larger or smaller depending on the screen size. Anything, helps.</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

... (rest of the CSS code)

htmlcssbutton

Answer №1

Definitely! Feel free to utilize the code snippet below within the .fieldset section:

display: flex;
justify-content: space-between;

Snippet

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  /* Styling rules omitted for brevity */
}

.container {
  /* Container styles */
}

/* Additional CSS rules */


<div class="container">
  <form id="contact" action="" method="post">
    <h3>Form</h3>
    <h4>Contact us</h4>
    
    <!-- Dropdown menu content -->
    
  </form>
</div>

Answer №2

Here are some ways to customize these declarations :

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 13px;
    font-size: 16px;
    width:125px;
    border: none;
    cursor: pointer;
    display:block;
    margin: 0 auto;
}

.dropdown {
    position: relative;
    /*display: inline-block;*/
    display:block;
    width:33.333333%;
    float:left;
}


@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

.fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 13px;
    font-size: 16px;
    width:125px;
    border: none;
    cursor: pointer;
    display:block;
    margin: 0 auto;
}

.dropdown {
    position: relative;
    /*display: inline-block;*/
    display:block;
    width:33.333333%;
    float:left;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Form</h3>
    <h4>Contact us</h4>
    <fieldset class="fieldset">
      <div class="dropdown">
  <button class="dropbtn">Location</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Category</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Sub-Category</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
    </fieldset>
    <fieldset class="fieldset">
      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset class="fieldset">
      <input placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>
    <fieldset class="fieldset">
      <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset class="fieldset">
      <input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
    </fieldset>
    <fieldset class="fieldset">
      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset class="fieldset">
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
</div>

Answer №3

To achieve this effect in your CSS, you can follow these steps:

@media only screen and (max-width: 500px) {
    input {
      width:100%
    }
}

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

Text-align problems causing confusion

Currently, I am developing a website aimed at raising awareness about the dangers of the internet. I am facing a frustrating issue with CSS where the text refuses to center both horizontally and vertically, and seems to be disobeying the styles applied. D ...

csstext-align

Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here. My index.html utilizes Bootstrap CDN, as shown below: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

csstwitter-bootstrapvue.jsbootstrap-4twitter-bootstrap-4

Strategies for handling user typos in a JavaScript prompt

Hi there! Just wanted to say that I'm new to this website, so please forgive any posting mistakes I might make. I'm currently taking a web technology class where we're learning JavaScript. In a previous lesson, we covered HTML5 and CSS. Our ...

javascripthtmluser-interface

The nested div within the ui-view element is failing to expand to the entire width of the window

I am facing a challenge in making a child div stretch to the entire width of the window, rather than just the width of its parent. I am incorporating AngularJS with UI-Router, and I'm not sure if that is causing the issue. Attached is a screenshot. ...

javascripthtmlcssangularjs

The error message indicates that the element countdown is missing or does not exist

I typically refrain from discussing topics that I'm not well-versed in (my weak spot has always been working with time and dates in javascript), but I find myself in urgent need of assistance. I've decided to use this link to showcase a countdow ...

javascriptjqueryhtmlcss

Ways to adjust the height of a Vuetify v-autocomplete listbox (results area) through CSS

I'm looking to adjust the height of the Vuetify v-autocomplete component, which is currently set at 304px (possibly a calculated value). <v-autocomplete class="flex-grow-0 ml-16 mr-6 largecontent" prepend-inner-icon="mdi-magn ...

cssvue.jscss-selectorsvuetify.js

problems with implementing nested columns in Bootstrap

I'm dealing with a container filled with nested columns. Strangely, the columns are now being displayed one after the other instead of side by side. I've been trying to figure out what's causing this issue. Take a look at my attempt to solv ...

csshtmltwitter-bootstrapbootstrap-4

Ways to achieve a blurry effect on CSS overflow content that is visible

I have two div elements - one called "divimg" which is fixed, and the other called "drag" which contains an image. I am currently using this image for dragging and resizing, with overflow set to visible on the divimg. My question is, how can I blur the vi ...

javascriptcssasp.net

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

javascripthtmlcssasp.net

What is the best way to conceal a div element on a Razor Page depending on the user's input?

How can I display the state field only when the user selects United States in the country field, and hide it otherwise? Here is the code snippet from my cshtml page: <div class="form-group col-sm-4 mt-4"> <label asp-for="Form.Co ...

c#htmlcssasp.net-corerazor-pages

Older browser compatibility for Flexbox flex-flow alternative

<template> <div> <h2>Kanal Listesi</h2> <div class="container"> <div v-for="(channel,index) in channels" :key="index"> <div v-if="channel.ChName"> <img :src="'h ...

javascripthtmlcssvue.jsflexbox

I desire for the iframe to only display under specific conditions

Currently, I have embedded an iframe onto a live website that I am still working on. You can find the iframe with results here. The issue is that I want to keep it hidden from the public eye. Therefore, I am exploring if there is a way to modify the link ...

phphtmliframe

Hover over the image to update the text display

Here's the HTML code I'm working with: <div id="container"> <ul> <li><img src="#" /></li> <li><img src="#" /></li> </ul> <h2>Some Text</h2> </div> I am looking to create a ...

javascriptjquerycsshover

What is the best way to incorporate an exception for the printThis() element?

Is there a way to exclude a specific div from being printed when using the printThis() function? For example: <div id="print-it"> <div>hello</div> <div id="no-print-this"> <button>must be show on page but not print</but ...

javascriptjqueryhtmlpluginsprintthis

Accessing locally stored files on the localhost

My attempts to access a PDF file from my local host through a PHP file have been unsuccessful. The link does not respond, although it works when I convert the file to HTML and place it in drive C or D. It seems that the issue lies with the use of HTTP on t ...

phphtmlfile

Issues with the styling of C3.js

I'm encountering some issues with a visualization I'm trying to create using C3.js. The top and side edges of my scatter chart are getting cropped (likely due to changing the radius of the bubbles), but I don't believe that should be cau ...

javascriptcssc3.js

Implementing a restriction on the highest page number possible and including navigational buttons for moving between

I have successfully created a pagination system using a text file as the database instead of relying on mySQL. However, I am facing an issue with limiting the maximum page numbering at the bottom of the page. Is there a way to restrict the page numbers dis ...

phphtmlpaginationtxt

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

jqueryhtmlajax

Is there a way to bring back smooth scrolling after formatting text within an "ios contenteditable element"?

In order to edit content within a "contenteditable element" on #ios, the following steps need to be taken: Steps Scroll smoothly to the selected text Touch into the element to open the keyboard Select multiple lines of text and format it to bold After f ...

javascripthtmlioscontenteditablemobile-webkit

Positioning the radio tag in perfect alignment with the adjacent image

I am struggling to align my radio buttons with the image placed beside them. The image has a width of 260 pixels and a height of 88 pixels, while the radio buttons are enclosed within a table. Although I attempted the following CSS code, it did not produ ...

cssimagehtml-table