Resize a category image in one place/instance

Hi @indigojones66,

You integrated your problem description with in your page at https://heritagecountrypottery.com/testing/ ?? – that is by far the best problem illustration I have seen for a long time. ??.

The way I would approach this is to create a container that has the measurements you need and then set the image as background. Something like this: https://d.pr/i/XKjjox

Does that go into the right direction?

Kind regards,

Thanks very much for your help

Hi Garry,

Thanks very much for your help

Anytime. All the best.

Dear Con,

That background idea was definitely the way forward…
I just can’t style for mobiles.

https://heritagecountrypottery.com/about66/

Regards

Hi @indigojones66,

Here is what I see in my mobile view: https://d.pr/i/JGr12D
What do you want to edit?

In general I think you will need to use CSS breakpoints: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Kind regards,

I just cannot work out how to style that block so it looks like the desktop version.
https://heritagecountrypottery.com/about66/

Hello,

To clarify, were you able to find a solution? I am asking because on my end when using the mobile view this is how it looks now:

Link to image: https://snipboard.io/x23kCT.jpg

Do you still need assistance? Please let us know ??

Kind of.
Bit the block below ~ Newly listed items etc ~ I have to give a massive margin top -140%

My client has changed his mind again so I now have a new problem

RE: https://heritagecountrypottery.com/
Screen grab: https://www.hardy.global/biggap.jpg

My desktop version is good.
My mobile version has an enormous gap between For Sale/Feature block and the block beneath…A + B (see https://www.hardy.global/biggap.jpg).

The nearest thing that works is to give block A (For Sale/Feature block) a margin bottom of -96% (minus 96 percent).

This works on some mobile devices but on some block B is too high (it disappears underneath block A).

Any help would be greatly appreciated

Hello @indigojones66,

I’m not sure if you’ve figured it out or if I didn’t understand the problem. There is no gap in the mobile view as you can see below:

Link to image: https://i.imgur.com/XRR96Rf.png

I did find a little gap when setting the width to less than 200px but that is expected as no mobile device is that narrow. ??

Cheers!

Hi Saif,

Thanks for your attention. The problem is, it seems different on different devices for some reason.
Please see screen grab: https://www.hardy.global/mobiles.jpg
I think it may be a problem with my theme ~ I have reached out to them.
thanks again. Regards Garry

Hi,

Please reach out to your theme support (Intuition Pro), they will be able to provide you with more information. Of course, feel free to let us know if you have questions after that.

Best.

Hello, how can I reduce the space between blocks on mobile?
Website ~ https://heritagecountrypottery.com/
Screen grab showing problem ~ https://www.hardy.global/spacing_mobile.jpg

Regards
Garry

Howdy @indigojones66 ??

Hello, how can I reduce the space between blocks on mobile?
Website ~ https://heritagecountrypottery.com/

Thanks for reaching out. Happy to help you with this!
From what I gather, the site at heritagecountrypottery.com has the Intuition Pro theme active. Per its style.css (directly linked here), its author URI is the one linked below:
https://www.cpothemes.com

Feel free to reach out to them regarding this inquiry, as it falls outside the scope of support provided here. Please see our Support Policy: https://www.woocommerce.com/support-policy/

I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.