How can I make multiple buttons in a container have equal width and resize when in landscape mode or on a wider screen?
My goal is to achieve the following:
https://i.sstatic.net/J8opN.png
https://i.sstatic.net/NZSjj.png
However, when I switch back to portrait mode, I get:
https://i.sstatic.net/d0FWa.png
The code can be found on JSFiddle here
To achieve your desired layout, consider utilizing the Bootstrap grid system. By wrapping your buttons within Bootstrap columns, you can create equal-width columns where each button is contained.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
To add spacing between the buttons, you can set a margin:
.mybtn
{
margin:0 5px;
}
For more information, visit this link
To optimize layout for different screen sizes, use col-md-4 for medium devices, col-sm-4 for small devices, and col-xs-4 for extra small devices.
Check out the following link for a live example.
To ensure your buttons are styled the way you desire, it's important to constrain their width to not exceed 33.33% of the total width on any screen size. To achieve this, you should utilize a parent row div and enclose each button within a col div, as illustrated in the code snippet below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Additionally, it's advisable to truncate the text with ellipsis to prevent overflow on smaller screens. Take note of the modifications made to the .button class in the CSS below.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
For a live demonstration, please refer to the jsfiddle provided
When I use my 1920px wide screen and inspect the HTML tag with Chrome DevTools on websites like Firebase or Facebook Messenger, I notice a difference: https://i.sstatic.net/1nknq.png Despite my screen width being 1920px, these websites appear fullscreen ...
I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...
I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...
There seems to be a CSS clash that I cannot pinpoint on the site below: You can find the code snippet here: /*Font face settings for h3*/ @font-face { font-family: carrotflower; src: url('/wp-content/uploads/fonts/Carrotflower.eot') format(& ...
There is a button present on the page <button class="btn btn-info btn-small-round" ng-show="row.Notes.length > 0" ng-click="showNotes({{row.Notes}})">View Notes</button> However, I am encountering a few issues. Firstly, the modal fails to ...
My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...
Last night, I spent some time testing out code for basic functions. To preview my work, I used two platforms - Dash and JSFiddle. Everything seemed to be running smoothly on both sites. However, when I uploaded the code to my live website, none of the butt ...
How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...
I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...
I have a variable in Smarty named {$url} which contains the following URL: $url = https://www.example.com/?parameter=hello:world:itsme I need to remove everything after the last ":" in the URL. The desired output is: $result = https://www.example.com/? ...
We are currently in the process of upgrading our application from old VueJS+Vuetify to VueJS3. However, we have encountered some classes defined in the template that are not available in the new version. These classes include xs12 (which is intended to co ...
Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...
Is there a way to determine the size of a list in a velocity template? I am currently working with version 1.4 of Velocity. List<String> list = new ArrayList<String>(); ...
Hey there! I'm a student currently diving into the world of JavaScript, CSS, and HTML. However, I've encountered a little problem while working on an exercise that involves using Bootstrap. function ShowForm(formId){ document.getElementByI ...
Greetings, fellow forum members! This is my inaugural post here. Despite the title possibly hinting at duplication, I have come across similar posts such as: one, two, three, four, and so on. However, my query bears a slight variation. I am currently in th ...
Currently working with angular 8 and attempting to add ngx bootstrap using the command ng add ngx-bootstrap. However, upon running the command, the following error message appears in the console output: Added "bootstrap Added "ngx-bootstrap ...
My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly. How can I achieve this layout using CSS? Additionally, is there a way to center the right-hand d ...
I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...
Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate you ...
I have a script that sends multiple requests to a website using RoboBrowser and retrieves responses, but now I need to filter these responses to exclude any containing the phrase "Case Status Not Available". I attempted to use Beautiful Soup for this purpo ...