Automatically resizing button on media query adjust

I'm experiencing an issue with these 5 buttons in mobile view. On desktop, all 5 buttons are displayed inline. However, on mobile, the last 2 buttons should appear below the first 3. I need them to remain fixed and occupy all available space even when the view is resized to smaller sizes. Please refer to the attached image for reference. Thank you.

https://i.sstatic.net/3fbAS.png

HTML

<div class="cont6">
    <button type="button" onclick="location.href='#date_2019'">2019 AAA</button>
    <button type="button" onclick="location.href='#date_2018'">2018 AAA</button>
    <button type="button" onclick="location.href='#date_2017'">2017 AAA</button>
    <button type="button" onclick="location.href='#date_2016'">2016 AAA</button>
    <button type="button" onclick="location.href='#date_2015'">2015 AAA</button>
</div>

CSS

.cont6 { margin:0 2%; display:flex; justify-content:space-between; width:96%; }
.cont6 button { 
    background-color:#EEE; 
    border:1px solid #E5E5E5; 
    color:#BF0000; 
    font-weight:bold; 
    font-size:17px;
    padding:1% 1% 1% 3%; 
    cursor:pointer;
}
.cont6 button:after { content:'\2BC6'; margin-left:40px; }

@media only screen and (max-width:640px){
    .cont6 { width:auto; display:block; }
    .cont6 button { margin-bottom:15px; margin-right:2%; font-size:16px; }
}
htmlcssbutton

Answer №1

If you want to enhance your layout, consider utilizing flexbox. Simply refactor your current code and experiment with this approach.

body {
  margin: 0;
  background: #333;
}

header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}

header div { 
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}

header div img { 
  width: 100%; 
  height: auto; 
}

@media screen and (max-width: 400px) {
  
  header div {
    margin: 1px;
  }
  
  header {
    padding: 0;
  }
  
}

button {
  width: 100%;
  border: 0;
  background: purple;
  color: #fff;
  border-radius: 5px;
  height: 60px;
}
<header>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
</header>

Alternatively, view the demonstration here

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

The last image in the Bootstrap 4 carousel maintains a wider width than the slider itself, not resizing to fit within the slider during animations when the screen is adjusted

Check out my Bootstrap 4 carousel slider on this link. The slider consists of 3 slides, but for optimal page speed performance, I've included 5 images of different sizes that load at specific screen widths. This was achieved using the <picture> ...

cssbootstrap-4bootstrap-carousel

Can CSS achieve Turing completeness?

As far as my understanding goes, CSS is not considered Turing complete. However, I admit that my knowledge of CSS is quite limited. Can CSS be classified as Turing complete? ...

cssturing-complete

Whenever I include __MSG_@@extension_id__ in my CSS file, I am encountering chrome://invalid

Currently, I am in the process of developing a chrome extension using Manifest V3. In my CSS file, I have incorporated the following code snippet to load local fonts. @font-face { font-family: 'PoppinsLight'; src: url('chrome-extensi ...

javascriptcssreactjsgoogle-chrome-extensionchrome-extension-manifest-v3

Transfer data to ASP.NET MVC using AJAX and FormData

I am working with a simple model: public class MyModel { public string Description { get; set; } public HttpPostedFileBase File {get; set; } } and I have an MVC action for uploading data: [HttpPost] public ActionResult Upload(List<MyModel> d ...

javascriptjqueryajaxasp.net-mvchtml

What is the best way to deactivate the onclick event after it has been triggered?

There was an image that triggered the add_cart() JavaScript function when clicked using onclick() <img src="images/add.png" onclick="add_cart()"> The goal is to limit the user to clicking the image only once. Upon the first click, the add_cart func ...

javascripthtmlcsseventsonclick

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

This code snippet displays a 3x3 matrix where boxes can be hovered over and selected. The goal is to navigate around with keys and select boxes using ENTER. Can anyone provide guidance on how to achieve this functionality? <link rel="stylesheet" href ...

javascripthtmlbootstrap-5

Tips for configuring the tooltip feature in Bootstrap Select plugin

I've been struggling to set the tooltip for a bootstrap select control, but I haven't been able to figure it out yet. In my situation, I have a select control without a label (due to the design of the page). So, when a user hovers over a selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble identifying the specific CSS property that is being used or inherited

I have incorporated components from Twitter Bootstrap CSS into a custom CSS file, focusing mainly on toolbar components. Specifically, I have set up a toolbar with various features. However, when applying additional CSS to the .signinbox_left:hover select ...

csstwitter-bootstrap

The JavaScript-generated SVG is visible in the inspector tool but does not appear on the screen

Test Code for XYZ <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <title>xyz</title> </head> <body> <div> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="360 ...

javascripthtmlsvg

Having trouble retrieving the accurate count of buttons with a particular class identifier

I have a task where I need to count the number of buttons within a dynamically created div using JavaScript. The buttons are added from a separate JS file and when I view the code in the browser's inspection tool, everything appears to be correct. How ...

javascripthtml

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

htmlcssinternet-explorer

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

cssreactjsmaterial-uistepper

Adjust the image size to fit the page according to its height

Having a dilemma here. I have this square image (2048x2048) that I want to set as a background. The tricky part is, I want it to display borders when the page stretches into widescreen mode, but also resize while maintaining its square shape when the page ...

htmlcssimageresize

Retrieve Table Row in HTML Based on Value

I have an HTML Table with names and favorite colors. <table id="colorTable"> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> < ...

javascripthtmljqueryhtml-table

Retrieving information from a server within several sections of a Flask application

Currently working on a project with Python using Flask and Jinja2, I am exploring ways to integrate a sidebar. Within the HTML pages, there is this snippet: {% include "sidebar.html" %} My objective for the sidebar file is to showcase a section highlight ...

pythonhtmlflaskjinja2sidebar

Ways to avoid the automatic rendering of a new component next to a button when the button is clicked

How can I render another component's data below the searching filters instead of beside the button when I click it? <Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 35 , marginBottom: 10}} onClick={this._onButtonClic ...

reactjsbutton

Tips for achieving a background animation similar to the one shown on this page

Check out this link: danielcoding.me/resume/#contact I am interested in this animation: screenshot I tried inspecting element on the page, but couldn't find any background images. How can I create this animation? Is it achieved through JavaScript or ...

javascripthtmlcss

Having trouble getting the image source to function properly with the Bootstrap Carousel feature in Django

I am struggling to include an image in my bootstrap carousel but the image is not loading. {% extends 'base.html' %} {% block html %} {% load static %} <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> </head> ...

pythonhtmldjangobootstrap-4

Code for dynamic drop down menu and pagination using PHP and HTML

I'm struggling to understand the logic behind adjusting the number of images displayed on my page. I can't seem to select the first option (5) from the dropdown menu. No matter what I choose, it always defaults to showing 10 images. This issue ...

phphtmlpagination