Return to previous page

Shop page spacing error for desktop version

This topic has 4 replies, 2 voices, and was last updated 1 months, 3 weeks ago ago by Rose Tyler

Nicolo

Participant

March 16, 2024 at 17:32

Hi there

Earlier i was assited by you to decrease the spacing between products on shop page.

I was given this CSS code by you guys:

/* Space between prods in shop page */
.products-grid .product:nth-child(odd) {
padding-right: 6px;
}
.products-grid .product:nth-child(even) {
padding-left: 6px;
}

This works great for mobile but something happens with desktop? check the inconsistency demonstrated in the screenshot
How can i modify the CSS to have it work responsively for all screens?

Thankd alot

Files is visible for topic creator and
support staff only.

#387194 Copied Theme version: 9.2.9

3 Answers
Rose Tyler

Support staff

March 17, 2024 at 10:31
Hello, Nicolo,

Thank you for reaching out to us with your concern.

Thank you for reaching out to us with your concern. We’re glad to hear that the CSS code we provided has worked well for your mobile layout. However, we apologize for any inconvenience caused by the inconsistency on the desktop view.

To ensure the spacing is responsive and consistent across all devices, you can modify the CSS by using media queries. Media queries allow us to apply CSS rules depending on the screen size. Here’s an updated version of the CSS that should help you achieve a more responsive layout:
```
/* Default spacing for mobile and small screens */
.products-grid .product:nth-child(odd) {
padding-right: 6px;
}
.products-grid .product:nth-child(even) {
padding-left: 6px;
}
```
```
/* Adjust spacing for desktop and larger screens */
@media (min-width: 992px) {
.products-grid .product:nth-child(odd) {
padding-right: 15px; /* Adjust the value as needed for desktop */
}
.products-grid .product:nth-child(even) {
padding-left: 15px; /* Adjust the value as needed for desktop */
}
}
```
Please replace the 15px values with the amount of spacing you desire on desktop screens. The min-width: 992px is a common breakpoint for desktop layouts, but you can adjust this value to better match the breakpoints defined in your theme’s responsive design.

Once you’ve updated the CSS, please clear your cache and check the shop page on various devices to ensure the spacing is consistent.

If you need further assistance or have any other questions, please don’t hesitate to contact us. We’re here to help!

Best Regards,
8Theme’s Team
#387230 Copied
Nicolo

Participant

March 18, 2024 at 10:47

Thanks for that amazing follow up, i will keep the code you provided!

#387311 Copied

Rose Tyler

Support staff

March 18, 2024 at 10:58

Hello, Nicolo,

You’re welcome!

Best Regards,
The 8Theme Team

#387314 Copied
Tagged: desktop version error, fix woocommerce layout, shop page spacing error, woocommerce desktop issues, wordpress shop page solution, wordpress woocommerce templates
Viewing 4 results - 1 through 4 (of 4 total)