Achieving optimal functionality of @media queries when using buttons

My goal here is to achieve the following:

  1. Make these buttons responsive on all screen sizes
  2. Ensure that the buttons shift down when the screen size reaches Mobile size or smaller, while maintaining at least 4 buttons per row for future additions
  3. When the screen size hits 768px or higher, revert the rows of buttons back to being wider with 8 buttons per row
  4. Utilize Bootstrap 4 for this project (open to switching to Bootstrap 3 if it better suits the requirements)

I've been struggling to implement these features for a couple of days now, particularly with the media queries. This setup is specifically for a photo gallery I'm currently developing.

Below is the code snippet I've written and a link to view it in action on Codepen - https://codepen.io/gradyhouston/pen/bKLbOO/

Thank you in advance for any assistance!

HTML

.img-responsive {
  display: none;
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .page-head {
    font-size: 18px;
    /* margin-top: -20px; */
    padding: 0px;
  }
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .container-gallery .vertical-buttons {
    display: flex;
    align-items: center;
    /* display: block; */
  }
}


/* @media only screen and (min-wi...

.all-button {
  display: flex;
  justify-content: center;
  margin: auto;
}

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 5px;
}

.vertical-buttons {
  display: flex;
  justify-content: center;
  padding: 5px;
}

.locations {
  
}

.button {
  -webkit-font-smoothing: antialiased;
 ...

  
  </div>
</div>

Answer №1

To achieve the desired layout, make sure to include the line 'flex-wrap: wrap' within the selector for `.vertical-buttons`. Below is the suggested code snippet.

.vertical-buttons {
    display: flex;
    justify-content: center;
    padding: 5px;
    flex-wrap: wrap;
}

Answer №2

Check out this example on how to use Bootstrap 4 classes efficiently: https://codepen.io/andrewchar/pen/jKZEPB?editors=1100

I simplified the code to showcase how just a few bootstrap classes can achieve the desired layout. By adding the row class as the parent element of the div containing our elements, you'll notice that it automatically applies display: flex and flex-wrap: wrap, allowing the elements to stack when space is limited without the need for media queries.

While further adjustments may be required for smaller screens like the Iphone5, this demonstrates the utility of flexbox in conjunction with Bootstrap 4 for responsive design.

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

aligning a trio of button pieces to seamlessly merge in CSS

I have a total of 6 files that I need to work with. They are as follows: button_01.png (left side of the button) button_01-RO.png (rollover effect) button_02.png (middle part of the button) button_02-RO.png (rollover effect) button_03.png (right side ...

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

When using the `display: table-cell` property on a div element, it does not automatically respect

How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specifie ...

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

ACF alternating number repeater

I want to create a two-column layout using ACF repeater fields, where the content alternates between left and right columns based on whether the row is even or odd. Here's how the output will be structured: Row 1: Image (left column), Description (r ...

Having trouble adding flexslider before a div element with jQuery

Hey there! I recently got flexslider from woothemes.com. The page structure I'm working with looks something like this: <div class="parentdiv anotherdiv"> <div class="child-div1">some buttons here</div> <div class="child-div2"& ...

Firefoxi is the only browser that exhibits strange padding and margin behavior

Check out this webpage at: www.bit.ly/1b4dUqs Most browsers display the page correctly, but there seems to be an issue with Firefox's (latest version) handling of margin-top/padding-top styles. If anyone has a solution for this problem, please share ...

Adjust Javascript to modify the URL by assigning a new URL without utilizing the origin as the parent

Currently, I am working on a script that is responsible for sending string values to the server in order to change the ipv4 information on a specific device. However, I am facing some difficulties and would appreciate some assistance with automatically upd ...

Update the input tag's value dynamically using another input element without the need for jQuery

I am working with 2 input tags Title: <b-input style="width: 50%" v-model="value.title" class="input-element" placeholder="Title" v-on:click="greet" /> Id: <b-input id="id" style="width: 50%" ...

Extract script from webpage using Python and Beautiful Soup

In the process of scraping 5 different shopping websites, I've successfully gathered valuable data from StackOverflow and YouTube. However, I have encountered a roadblock with one particular website. After utilizing various methods such as AJAX, Googl ...

Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table. You can find the complete code here: http://jsbin.com/xihebol When s ...

Tips for implementing page-break-after:always within a bootstrap row?

I have a bootstrap row with a set of divs inside like this: @media print { p { page-break-after : always } } <div class = "row"> <div> data1 </div> <p> break page here </p> <div> data2 </div> <div> ...

How can I showcase CSV data as clickable links and images on a website using HTML?

Looking for a way to display CSV file links as clickable hyperlinks in a table? Want to directly show images from photo links on your website as well? Wondering if this is even possible? Successfully showcased desired content in a table with the code prov ...

Is there a way to determine the quantity of items within a sortable div?

In my HTML document, there are multiple divs containing smaller divs that can be rearranged within each other. Upon loading the document, a random assortment of these smaller divs are added to #boxtop. Below is a snippet of my HTML code: <html> &l ...

The sidebar I designed didn't completely extend across the column in Bootstrap

My sidebar in Bootstrap didn't fill the entire column because I forgot to set a specific width for it. Here is the CSS code for my sidebar: .sidebar { position: fixed; /* top: 0; bottom: 0; left: ...

Trouble organizing a collection of destinations based on their geolocation and proximity

To address this issue, my approach has been to feed variables into the value attributes of an option list and then sort it based on these values. When manually assigning values, everything works smoothly, for example: <option id="link1" value="1">A& ...

CSS box spacing is the key factor in creating clear layouts and

Having these 3 boxes is causing some spacing issues that I need to address. Whenever I try to add margin, the third box shifts to the next row. Below is the snippet of code: CSS: #hotels { background: url('../img/PICS/19427110_ml.jpg'); ...

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...