The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens?

(I apologize for the brevity of this description, but there are no additional details to provide at this time)

.browser-box {
  max-width: 270px;
  margin: 0 auto 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }
<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

htmlcssflexbox

Answer №1

The spacing issue is a result of the margin: 0 auto 40px; property in the css for .browser-box. By setting the left and right margins to auto, it creates padding around the element. To resolve this, adjust the left and right padding to 0 so that the column-gap can control the horizontal spacing.

.browser-box {
  max-width: 270px;
  margin: 0 0 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

.browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }
<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

Answer №2

The margin attribute in the .browser-box CSS needs to be adjusted as it is currently overriding other declarations.

.browser-box {
      max-width: 270px;
      margin: 0;
      box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
                  rgba(149, 157, 165, 0.2) -2px 0 6px;
      /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
      border-radius: 8px;
    }

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

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

javascripthtmlangularjs

Horizontally align the label with the Checkbox

Hi everyone, I'm new to this forum and I've encountered a problem that I am struggling to resolve. The issue lies with a table containing a checkbox list. Initially, everything looks fine when I use: display:inline-block; However, on small ...

jqueryhtmlcsscheckboxtext-align

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

javascripthtmljquerycss

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

htmlcss

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...

htmlcss

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...

phphtmljquery-mobile

Find the div element that wraps around the currently selected radio button

Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...

csscss-selectors

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in ...

javascriptcssrshinybslib

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

pythoncssflaskjinja2

What is the optimal resolution for a background image in a Cordova app?

Currently working on a Cordova application that requires different background images for various screens. Despite using media queries to provide the background image in different resolutions, we are facing an issue where the background image is not displ ...

androidioscsscordova

Vanishing essence

http://jsfiddle.net/ddGHz/1004/ //html <div id = "anglereturn"/> <div class="box"></div> //js, jquery var box=$(".box"); var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; $(document).mousemove(function ...

jqueryhtmlcss

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...

htmlcssangularbootstrapping

Swap out the HTML tags with JavaScript code

I've been looking everywhere, but I couldn't find the answer. Here is my issue / question: I have a page from CKEDITOR with: var oldText = CKEDITOR.instances.message.getData(); So far, so good. The string looks something like this: <table ...

javascriptjqueryhtmlhyperlinkreplace

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea. <md-sidenav #sidenavSearchArea align="" mode="push" opened="false"> sidenav content here.. </md-siden ...

cssangular

Issues with the CSS in our unique eBay template are creating some challenges

Our team is currently in the process of creating a customized template for our eBay listings. eBay provides users with the option to upload a description as HTML code and allows the code to link external CSS files. When uploading HTML code on eBay, it ap ...

htmlcsstemplates

Positioned footer without predetermined height

I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...

javascripthtmlcsstwitter-bootstrap-3

s3 key not found, The specified key does not exist. previewing file from a web link

After utilizing paperclip and s3, I successfully uploaded a word document and now I am seeking the ability to preview it directly from the database using an iframe. https://i.stack.imgur.com/ceCPu.png <iframe src="<%= agreement.document.url(:smal ...

htmlruby-on-railsamazon-web-servicesiframeamazon-s3

Unique Custom Resources like CSS and JavaScript are used to ensure a consistent appearance across all applications

We have identified a challenge where we aim to develop custom CSS, Javascripts and other resources to maintain consistent look and feel across all our applications. These applications could be built using GWT, Thingworx, JSP, etc., and may differ in natur ...

javascriptcssgwtframeworks

Is it possible for an <input> tag in PHP AJAX to have an "action" attribute similar to a <form> tag?

Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...

javascriptphpjqueryhtmlajax

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

javascripthtmlthree.jscoordinatesscene