Docs

[mcphoto]

Hello X – have a site about done, but a few little things I can’t find myself –

Homepage:

I’m using the block grid for the 8 product images, works fine – but on mobile, the square blocks become rectangles. I’d like them to remain square and be centered on mobile, any CSS for that? (I have given a class to the blocks to add a border).

I’m using woocommerce to create a catalog of products, but disabled all the shopping cart stuff, it’s worked wonderfully for this application. Two issues:

Product category pages –

When you roll over an item, you get the red “read more” box on hover – I’d like to lose the shopping cart icon, haven’t been able to find this. I’d rather do it via CSS or in the child theme if possible.

Individual product pages –

If you click on a photo, it opens in a blank page and you have to use the back button to return to the product – can I disable linking entirely for product images on product pages, so the cursor doesn’t change, no hover effect, and no link?

Thanks for any assistance!

[mcphoto]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

1. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( max-width: 767px ) {

.x-block-grid {
    text-align: center;
}

.x-block-grid>li {
    display: inline-block;
    float: none;
    height: auto;
    margin: 1% auto !important;
    padding: 0;
    width: auto !important;
}

}

2. Please add this CSS as well,

.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before {
display: none;
}

3. Sure, please add this as well

.woocommerce div.product .images {
    pointer-events: none;
}

Hope this helps.

[mcphoto]

Thanks for the quick reply – solutions 2 and 3 (cart icon and image links) worked fine; I’m still getting rectangular boxes on mobile preview (problem 1), and the image is at the left of the box. Any other ideas? Thanks again!

[mcphoto]

Screen grab:

[Rad]

Hi there,

It’s because of this

.x-block-grid-item {
  font-size: 13px;}
}

it should be like this

.x-block-grid-item {
  font-size: 13px;
}

Cheers!

[mcphoto]

Ahh, thank you! Looks perfect now.

I have another issue that’s maybe more complex regarding archive pages and categories, etc – I’ll do a new thread for that since it’s pretty specific.

Thanks again, you guys hear it all the time, but – best service on the planet.

[Rad]

You’re so much welcome!

[Author]

Posts