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

Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...

htmlcss

Steps to creating an Ajax JQuery in WordPress with promises

Currently, I am in the process of developing a custom Wordpress Google Maps plugin. This plugin fetches locations from a database using Ajax and returns an XML file that is then handled by a Javascript script to display them on a Google Map. Everything is ...

javascriptjqueryajaxwordpress

Using XSLT to format HTML tables for printing

In my current project, I am developing an XSLT that retrieves a list of items from an XML file and generates an HTML table for each item. The issue I am facing is that when I attempt to print the document, the tables at the end of the page get cut off and ...

htmlcssxmlxsltxslt-1.0

Navigating paginated content within a WordPress plugin using $wpdb

Having some issues with creating a plugin for WP. I need to display information from my database in the content. I have written a code that successfully retrieves data from my database but struggling with implementing pagination. I've read several pos ...

phpwordpresspagination

Is there a way to send a Python list to Django?

I'm in the process of setting up a website where I can retrieve a JSON list from my PRTG. Currently, I have successfully implemented code in the console that filters out sensors with a status of DOWN. However, I am facing difficulties in posting this ...

pythonhtmllist

Ways to ensure that a jQuery function does not run until another one has finished

My JQuery functions are as follows: First Function $(function(){ $(".staffDiv div").hide(); $(".staffDiv img").hover(function(){ $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast"); $(this) ...

javascriptjqueryhtml

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

javascriptphphtmljquery

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...

csstwitter-bootstrapgruntjsless

Tables that respond to changes in screen size, allowing nested table cells to inherit widths

I am currently working on a responsive table with unique content in each row and a concertina feature for expanding rows. When the concertina is activated, it adds another row to the table below the current row, using a td element with a colspan attribute ...

javascriptjquerycsshtml-tableresponsive

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

htmlcssangulartypescript

Utilizing jQuery to dynamically add or remove a class based on the selected radio button option

I am trying to achieve a functionality where checking one radio button will add a class to the label of another radio button, and unchecking it will remove that class. I have provided a Plunker example here. It seems simple but I'm having trouble gett ...

jqueryhtml

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size: HTML: <div class="grid-container"> <div class="grid-item"> <img src="small-thumb-dpi.jpg" /> < ...

htmlcssflexboximage-gallery

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

javascriptphphtmlmysql

Tips for applying CSS conditionally to content at varying nesting levels

Currently, I am working with sass and finding it challenging to modify the structure of the page easily. The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing: <div class="container"> ...

htmlcsssass

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...

javascriptphphtmlcssjquery-isotope

Implementing dynamic content updating in WordPress by passing variables and utilizing AJAX

Currently, I am working on a shopping page that displays a list of all the stores. To streamline the user experience, I have created a sidebar containing various categories and implemented pagination within the store listings. These lists are generated thr ...

javascriptphpjqueryajaxwordpress

The choices in the cell table selection are obscured due to the select table's height when opened

I am experiencing an issue with a table where each row contains two cells with "select" options. The problem arises when I open them, as they load within the table and the available options are not clearly visible. I can only view all the options by scroll ...

javascripthtmljquerycsstom-select

Transforming Google Maps from using jQuery to AngularJS

If I have a Jquery google map with find address and routing system, my goal is to convert it to an angular google map with more options. The current Jquery google map code looks like this: var directionsDisplay = new google.maps.DirectionsRenderer({ d ...

javascriptjqueryhtmlangularjsgoogle-maps

Variety of background colors for different categories

Is there a way to showcase my categories with different background colors using a custom post type? I want to link the slug name from my taxonomy to serve as the class attribute for a span element and style it with CSS. However, I am encountering issues wi ...

phphtmlcsscategoriestaxonomy