Optimal method for resizing numerous buttons within a container

My goal is to make my website keyboard-friendly on mobile devices. I had been using @media queries, but with limited testing capabilities, I want to ensure broad coverage. Currently, Bootstrap is being used for the images, but I struggled to find a suitable tutorial for creating a group of buttons.

<div id="keyboard">
<div class="keyboardRow">
    <button id="keyboardKey" class="keyboardKey">A</button>
    <button id="keyboardKey" class="keyboardKey">E</button>
    <button id="keyboardKey" class="keyboardKey">I</button>
    <button id="keyboardKey" class="keyboardKey">O</button>
    <button id="keyboardKey" class="keyboardKey">U</button>
    <button id="keyboardKey" class="keyboardKey">P</button>
    <button id="keyboardKey" class="keyboardKey">H</button>
</div>
<div class="keyboardRow">
    <button id="keyboardKey" class="keyboardKey">G</button>
    <button id="keyboardKey" class="keyboardKey">R</button>
    <button id="keyboardKey" class="keyboardKey">T</button>
    <button id="keyboardKey" class="keyboardKey">K</button>
    <button id="keyboardKey" class="keyboardKey">M</button>
    <button id="keyboardKey" class="keyboardKey">N</button>
    <button id="keyboardKey" class="keyboardKey">W</button>
</div>

<div class="keyboardRow">
    <button id="buttonHint">Hint</button>
    <button id="buttonQuit">Quit</button>
</div>

#keyboard {
    font-size: 16pt;
    width: 50%;
    margin: 0 auto;
}

.keyboardRow {
    position: relative;
    text-align: center;
}
#keyboardKey {
    display:inline-block;
    border:1px solid black;
    margin-left: 5pt;
    font-size: 16pt;
    width: 70pt;
}

Answer №1

It sounds like you might be interested in exploring the concept of a 'button cluster'. You can learn more about them by visiting this page on Bootstrap's website.

Answer №2

To make the keyboard keys responsive in width, consider using the vw unit in combination with min-width and max-width.

Here's a demo on JSFiddle: https://jsfiddle.net/xj3uqh7h/

Custom CSS Styles

#keyboard {
    font-size: 16pt;
    width: 50%;
    margin: 0 auto;
}
.keyboardRow {
    position: relative;
    text-align: center;
}
#keyboardKey {
    display:inline-block;
    border:1px solid black;
    margin-left: 5pt;
    font-size: 16pt;
    max-width:50px;
    min-width:28px;
    width: 7vw;
}

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 your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

Is foreach the key to optimizing your queries?

At first, I created three separate queries ($rs1, $rs2, $rs3) for the IFs to check if any images are assigned to the specified product in the database. The challenge now is optimizing this process by consolidating it into a single query and using a foreac ...

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and th ...

Mastering the art of horizontal alignment for button and ul elements

I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...

Color schemes for items in the Windows store app

I'm having trouble changing the background color of an item in my split application. I've tried using CSS, but nothing seems to work. Here is the template for the item (default style): <div class="itemtemplate" data-win-control="WinJS.Bindin ...

Adjust the dimensions and position of the notification box using Twitter Bootstrap

I am struggling to center and adjust the size to 80% of an alert box, but the text-center class is not achieving this for me. <div class="text-center"> <div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa- ...

Discovering the content within table cells by utilizing JavaScript functions linked to specific IDs

I am currently working on a project that involves a dropdown list: <select id="itemsList" onchange="gettingList()"> <option>Please choose an option</option> <option value="50">Shampoo</option ...

Immersive video platform combining HTML5 and Flash technologies

Is there a way to produce videos like the ones seen on this website: ? Are there any other websites or tutorials available that offer similar video creation techniques? ...

The foundation grid system is experiencing difficulties when implemented on an Angular form

After successfully installing Foundation 6 on my Angular project, I am facing an issue with the grid system not working properly. Despite numerous attempts to troubleshoot and debug, I have not been able to resolve this issue. If anyone has any insights or ...

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

"Enhance Your Website with jQuery's Dynamic Multi-Animation

I'm facing an issue with my website where, upon clicking the contact link in the navigation bar, a contact box slides down and the navigation bar moves below it. However, when the contact link is clicked again to hide the contact box, the navigation b ...

challenges in populating arrays with Javascript

After performing certain actions, I have generated an array of data. Upon submitting the page, the control will redirect to the second page where I need to populate the array data into tables using Javascript only. The problems I am currently facing are: ...

dynamically adjust table cell width based on number of rows

My HTML structure is as follows: <table border=1 > <tr> <!--this tr has one <td> that needs to be 100% width--> <td></td> </tr> <tr> <!--this tr has two <td> that each need to be ...

Insert a percentage sign into a right-aligned text box

I am trying to figure out how to permanently display a % symbol at the far right side of a textbox that shows a percentage. Can anyone help me with this? ...

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...

Achieving overlapping div layouts with CSS styling

Displayed above are 4 different divs: red, green, and blue. I am seeking to have the blue div positioned directly below the green div, which contains the text "JACKSON". Additionally, I do not want the green div to expand beyond its content, nor do I want ...

Processing file to retrieve information (JavaScript)

As someone who is new to the world of JavaScript and website development, please forgive me if this question seems a bit basic. The concept is to have a popup message appear on every page with some information. The issue arises when wanting to change this ...

Alter the URL for Jquery AJAX post by utilizing radio buttons

I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...

How can you gradually make a CSS border disappear?

Can an element's border fade away with the use of JavaScript only, without relying on jQuery for animation? We are currently working with Sencha and it seems that ExtJS only allows for animating element size and position. While CSS3 offers helpful ani ...