Garry Rigby

Hi Beatrice, I understand. I just got the code from the pro theme people.
Thanks for your response. Regards Garry

Here is the css if anyone else wants it…

#header-widget-area { max-width: 1180px; padding: 0 20px; margin: 0 auto; }

Easy when one knows how!

This seemed to work after looking at your previous code. I think I have worked out the convention…

@media (max-width: 480px) {
   .peter2-class .wc-block-grid__products {
       display: flex !important;       
   }
   .peter2-class .wc-block-grid__product {
       flex: 1 0 33% !important;
   }
}

@media (max-width: 480px) {
   .peter3-class .wc-block-grid__products {
       display: flex !important;       
   }
   .peter3-class .wc-block-grid__product {
       flex: 1 0 25% !important;
   }
}

thanks Darcie. I did make a custom header but the woocommerce block did not work in that. I shall investigate further. thank you again

Thanks again Gabriel. I did try making custom headers and footers but the woocommerce blocks did not work in them. I shall investigate further. thank you again

re: https://heritagecountrypottery.com/blocks/

Hi, thanks for the reply.
I think I will use a redirect which will make it easier for my client.

Could you help me with styling blocks for mobile. At present all images stack on top of each other; I wanted it to look like this : https://hardy.global/mobiles.jpg.
I managed to achieve one bit with the code below but cannot work out how to stop the wc-block-product-category (3 images and four images) not stack at all.
This code worked for the top six images

@media (max-width: 480px) {
    .wc-block-handpicked-products .wc-block-grid__products {
        display: flex !important;       
    }
    .wc-block-handpicked-products .wc-block-grid__product {
        flex: 1 0 33% !important;
    }
}

or you could have said this

@media (max-width: 480px) {
   .wc-block-handpicked-products .wc-block-grid__products {
       display: flex !important;       
   }
   .wc-block-handpicked-products .wc-block-grid__product {
       flex: 1 0 33% !important;
   }
}

Gabriel, you are a star thank you so much for the css that worked perfectly.
May I just ask you how I would make the 2 blocks below ~ wc-block-product-category (3 images and four images) not stack at all, so it stays as it would on mobile?
I would be eternally grateful.
https://heritagecountrypottery.com/blocks/
https://hardy.global/mobiles.jpg
Regards Garry

Hi Ryan

I tried these bits of code below which nearly worked but didn’t…

@media(max-width: 480px) {
    .wc-block-grid.has-6-columns .wc-block-grid__product, .wc-block-grid.has-6-columns .wc-block-grid__product {
        width: 48% !important;
        float: left !important;
        margin-left: 1%;
        margin-right: 1%;
    }
}

@media(max-width: 480px) {
    .wc-block-grid.has-6-columns .wc-block-grid__product, .wc-block-grid.has-6-columns .wc-block-grid__product {
     flex: 1 0 33.3333333333%;
max-width: 33.3333333333%;
    }
}

Re: Page I need help with ~ https://heritagecountrypottery.com/blocks/
Image showing what I would like ~ https://hardy.global/mobiles.jpg

How can I style for mobile? On mobile all the blocks stack one image on top of the other.
I wanted the Hand-picked Products (Top 6 images) to stack three by three and the Products by category to have no stacking ~ as it looks same as on desktop

I tried this code for the top 6 images which nearly worked but didn’t…

@media(max-width: 480px) {
.wc-block-grid.has-6-columns .wc-block-grid__product, .wc-block-grid.has-6-columns .wc-block-grid__product {
width: 48% !important;
float: left !important;
margin-left: 1%;
margin-right: 1%;
}
}

I added a custom class on the page called peter1 which did not seem to make any difference

Changing style of blocks for mobile I wanted something like this;
see image: https://hardy.global/mobiles.jpg

I wanted a block of six images at the top of every page that links to my 6 categories. I made a new product and a category called top menu so that it will be easy for my client to update. Problem is the link obviously goes to that product’s page ~ in this instance I wanted the link to go to a category

Hi

I wanted this block, Hand-picked Products to link to my categories and not a products page

6 ~ links to 18 cnetury category
5 ~ links to 19 cnetury category
4 ~ links to 1slipware category
3 ~ links to etc

see image…https://hardy.global/category_url.jpg

Regards

Hi,

I wanted the Hand-picked Products and Products by Category to appear on every page

see image for example…
https://hardy.global/block.jpg

Hi Mirko,

You say my thumbnail images in the gallery have 100×100 pixels dimensions ~ what is wrong with that?
What should they be then?
And whatever ratio I set them to they are still blurred.
Is this not something I should amend in WooCommerce setting?
Regards Garry

thanks very much