Minimize the screen dimensions and adjust the margins accordingly

Having a problem with responsive margins? Take a look at this site as an example:

When I shrink the screen size, the margins decrease and smoothly transition from 4 to 2 columns.

In my case, it does something similar but the issue is that the margin doesn't adjust before reverting to 2 columns. This causes the thumbnails within each column to reduce because it maintains a 7.5% margin on either side.

Does anyone know how I can fix this to match the behavior of Bali Body?

Sample code:

<div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>

  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>
  
  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>
  
  <div class="post_content">
        <a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">
        </a><h3><a class="" href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/"></a>
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/">Genji Challa – Ethiopian Single Origin</a></h3> 
        
        <a href="https://balancecoffee.co.uk/stage/product/genji-challa-ethiopian-single-origin/#respond"><div class="star-rating"><span style="width:0%"></span></div></a>
        <span class="tastenotes">Nectarine, blood orange, redcurrant</span>
  ...
  </div>

CSS:

.woocommerce-page ul.products li.product.column-1_4 {
    width: 25%;
}

.woocommerce ul.products, .woocommerce-page ul.products {
    margin-right: -30px;
    margin-bottom: 0;
}

.archive .slider_boxed, 
.content_wrap,
.archive .content_container{
width:85%;
margin: 0 auto;
}
htmlcsswordpress

Answer №1

When working with Bali Body, they established a grid class that accommodates 4 rows on desktop and 2 on smaller screens. To achieve this using Bootstrap, you can create 4 columns for large screens (col-md-4) and 2 columns for smaller screens (col-sm-2). If you need to adjust margins for smaller devices, consider utilizing a CSS media query for smaller screens.

@media only screen and (max-width: 768px)
 .grid {
margin-left: -15px;
}

This will apply a left margin of -15px specifically for mobile and tablet devices. You can include additional CSS properties that will only impact mobile and tablet devices. Simply replace 'grid' with your designated class name (e.g., li.product.column-1_4).

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

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...

javascripthtml

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

Here's an example of HTML code that I am working with: <button id="toolbar-item-17-update-id" type="submit" name="action" value="update" class="button-action-update btn btn-secondary"> Ed ...

javascripthtmlcss

Creating dynamic animations by shifting the hue of an image on a canvas

Recently, I've been exploring the world of canvas tags and experimenting with drawing images on them. My current project involves creating a fake night/day animation that repeats continuously. After trying various approaches like SVG and CSS3 filters ...

javascripthtmlcanvascolorshue

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

c#javascripthtmlasp.netlogout

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

Having trouble loading Three.js in JavaScript file using npm install?

I am encountering a problem when trying to include Three.js in my JavaScript file without using the HTML script element. The error message I receive is "Uncaught SyntaxError: Cannot use import statement outside a module". Although my Three.js code runs suc ...

javascripthtmlimportthree.js

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

javascriptcssreactjsnode.jsreact-native

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Is anyone else experiencing a specific issue after updating to WP 5.6? Since the update, all my websites are facing problems with rendering a Slick Slider in the Block Editor. Interestingly, everything looks fine on the front-end. The root of the problem ...

javascriptcsswordpressslick.js

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

I keep encountering an issue when trying to load the website <a href="linktext.com">linktext.com</a> using SQL and PHP

I recently encountered an issue while trying to retrieve data from an SQL database on a webpage using PHP. The process was interrupted whenever there was a hyperlink present in the SQL text data, such as linktext.com. I attempted to use HTML special chara ...

phphtmlsqlhyperlink

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Using jQuery to dynamically select all rows (`tr`) that contain table data cells (`td`) matching

Although my title may seem confusing, it's the best I could come up with. I'm looking to identify all tr elements that contain td elements matching specific filter criteria. Here is an example: <tr class="row" id="1"> <td class="ph ...

javascriptjqueryhtml

Trouble with the JQuery event listener onchange()

On my webpage, I've set up a drop-down list and a text-box in the following HTML code: <table> <tr> <td>Group Name: </td> <td><%= Html.Dr ...

jqueryhtmlhtml-helper

Adding an iframe with inline script to my Next.js website: A step-by-step guide

For my Next.js project, I have this iframe that needs to be integrated: <iframe class="plot" aria-label="Map" id="datawrapper-chart-${id}" src="https://datawrapper.dwcdn.net/${id}/1/" style="width: ...

javascripthtmlreactjsnext.js

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

javascriptcssangularhtml

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

javascripthtml