Reducing the size of buttons upon page minimization in CSS and HTML

I have a group of buttons in HTML:

<div class="controls">
  <div id="s-controls">
    <button class="control-btn" style="background-color: #2de7f6">1</button>
    <button class="control-btn" style="background-color: #69a6ea">2</button>
    <button class="control-btn" style="background-color: #736ace">3</button>
    <button class="control-btn" style="background-color: #372ac3">4</button>
  </div>
</div>

When I try to make the page smaller, the buttons maintain their original size and it looks messy.

I have experimented with CSS, but I am not very skilled. Here is what I have tried so far:

.controls {
 background-color: #1F1F1F; 
 min-height: 50px;
}

button {
 margin: 20px auto;
 max-width: 100%; 
}

#s-controls, #p-controls {
 text-align: center;
}

#s-controls > *, #p-controls > * {
 font-family: "Titillium Web", sans-serif;
 font-weight: 600;
 color: white;
 cursor: pointer;
}

.control-btn {
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  line-height: 2.5em;
  padding: 0 3em;
  text-decoration: none;
}

 line-height: 1.75em;
  padding: 0 0.75em; 
 }

 .control-btn:hover { 
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 
   inset 0 1.5em 1em rgba(255,255,255,0.3);
 }

I am looking for a solution using only HTML and CSS to shrink the buttons so they maintain their original design on one row.

Any guidance would be greatly appreciated!

htmlcss

Answer №1

To optimize the layout of your webpage, consider specifying a width for all containers including #s-controls and div.controls. Additionally, make sure to set the exact width for the buttons instead of just the max-width property.

div.controls { width: 100%; }

#s-controls { width: 100%; }

button { width: 100%; max-width: 100%; }

Answer №2

By utilizing media queries, you can achieve the desired manipulation on various devices or when resizing your browser window.

To accomplish this for all desired widths, make sure to adjust the padding as necessary:

@media (max-width:991px){ //you can modify this value to 768px, 560px, 480px, etc
   .control-btn {
      padding: 0 2em;
   }
}

Answer №3

To ensure proper alignment on different devices, you can utilize media queries. For instance, for mobile devices with a width of less than 480px, I have included the CSS rule {width: 100% !important;} to prevent any collapsing.

If this is not what you are looking for, please inform me.

@media screen and (max-width: 480px) {
    button {
padding: 0 2em !important;
}
  }

controls {
 background-color: #1F1F1F; 
 min-height: 50px;
}

button {
 margin: 20px auto;
 max-width: 100%; 
}

#s-controls, #p-controls {
 text-align: center;
}

#s-controls > *, #p-controls > * {
 font-family: "Titillium Web", sans-serif;
 font-weight: 600;
 color: white;
 cursor: pointer;
}

.control-btn {
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  line-height: 2.5em;
  padding: 0 3em;
  text-decoration: none;
}

 line-height: 1.75em;
  padding: 0 0.75em; 
 }

 .control-btn:hover { 
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 
   inset 0 1.5em 1em rgba(255,255,255,0.3);
 }
<div class="controls">
  <div id="s-controls">
    <button class="control-btn" style="background-color: #2de7f6">1</button>
    <button class="control-btn" style="background-color: #69a6ea">2</button>
    <button class="control-btn" style="background-color: #736ace">3</button>
    <button class="control-btn" style="background-color: #372ac3">4</button>
  </div>
</div>

.

Answer №4

If you're looking to make sure buttons don't wrap, simply add nowrap to the button container:

#s-controls { white-space: nowrap; }

Remember to set the button width as well:

.control-btn {
  max-width: 90px;
  width: 24%;
}

Feel free to adjust these values to suit your needs.

Keep an eye out for an extra closing curly bracket in the .control-btn class, as it can cause issues. Remove it.

  padding: 0 3em;
  text-decoration: none;
  /* } extra bracket */
  line-height: 1.75em;
  padding: 0 0.75em;

Check out the code in action on this fiddle

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

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

CSS3 functions properly on jFiddle, but is not compatible with Internet Explorer

This is a snippet of my code that includes a CSS animation. You can view the live version on JsFiddle here. When I open the JsFiddle link in IE, everything works perfectly as intended. However, when I try to run the same code locally, I encounter issues ...

cssinternet-explorer

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

javascripthtmlfirebasegoogle-cloud-firestore

View pictures on Angular without an internet connection

As I work on an Angular application, I am faced with a challenge in the app.component.ts file. The application should detect when a user loses internet connection while on a certain page, and in response I want to display a component featuring an error mes ...

javascripthtmlangularsvgoffline

The issue of the container div tag not being able to achieve 100% height and width

My web page layout has a CSS issue where I am unable to achieve 100% height in Firefox and Chrome, unlike in Internet Explorer 9. I have tried multiple examples but encountered the same problem. You can view the code on http://jsfiddle.net/cwkzq/3/ where i ...

csshtmlheightwidth

Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance. Here is the current code: button { /* padding- ...

htmlcss

Reveal the concealed element

My webpage features a hidden span element within a div that I would like to reveal when a button is clicked. However, the functionality is not working as expected. Here is my code: <!DOCTYPE html> <html> <head> <meta charset="ut ...

javascripthtml

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

csshtmlbootstrap-4

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

Choose checkboxes from an array of values using AngularJS

I have recently developed a page that includes text boxes, radio buttons, and checkboxes. This page serves as a platform for saving new data or modifying existing information. While I can successfully save new data, I encountered an issue when trying to ed ...

htmlangularjsarrays

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

Is there a way to refresh the even and odd count in CSS whenever a specific row is shown? Here's an example setup: header header header even even even odd odd odd Subhead Subhead Subhead even even even How can I ensu ...

htmlcss

CSS: Adjusting font color for targeted disabled field elements

After researching various solutions, I came across a method to change the font color of all disabled fields by using the following code snippet: input[disabled=disabled] { /* your style */ color: #fff !important; } However, I have multiple disabled fie ...

htmlcssdisabled-input

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

Exploring the realm of web scraping by targeting a UFC betting site for data extraction. JavaScript, alongside request-promise and cheerio packages, is utilized in this endeavor. Site: The primary aim is to retrieve the fighters' names along with th ...

javascripthtmlnode.jsdomweb-scraping

What is the most efficient way to send various props to multiple child components within a React parent component?

Currently, I am working on developing a color palette generator using React. However, I have encountered an issue where all child divs in the color palette receive the same color instead of different colors. Below is the code snippet: class ColorPalet ...

htmlreactjswebcomponents

Adding custom CSS and JavaScript to the TYPO3 backend: A step-by-step guide

Is there a way to incorporate css and javascript files into the backend? I'm aiming to enhance custom created content elements with these files, making them more visually appealing for users. Platform: TYPO3 v9 Method: Composer Mode Purpose: Cu ...

javascriptphpcsstypo3element

Show the jQuery code block as HTML within a textarea

I'm in need of a way to display script reference code in a textarea for easy copying by users. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/> Even though I am using jQuery, all the solutions I ...

jqueryhtmlinnerhtml

What could be causing the issue with my code where the canvas is not showing boxes beyond a y-coordinate of 8 along the x-axis?

I've been working on creating a 64 square checkerboard using the html canvas element in javascript, but I'm encountering an issue. The boxes aren't rendering properly after the first 8 squares on the y-axis, and I can't figure out where ...

javascripthtmlcanvas

Connecting Angular directive to a controller

While diving into some Angular JS tutorials, I decided to apply what I learned in the Ionic framework. Unfortunately, I hit a roadblock when attempting to create a reusable HTML control because the model isn't syncing with the view as expected. Here&a ...

javascriptangularjshtml

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

Is there a way to create a diagonal movement for an image by clicking on another HTML element?

<!DOCTYPE html> <html> <head> <meta charset="UTF-9"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { $(document).re ...

javascriptjqueryhtmlajax