Removing title from thumbnail; not attribute

Please post the url to the relevant page so that the page markup can be examined using browser tools. Page markup varies by theme, so an image won’t do for this request.

Hello,

Here is the url.

Every category has a grey box with the category name.

I would like to remove those and have the category name separate from the image and positioned below the image.

Thanks for the help.

It looks like you have some security implemented that prevents inspection of the page markup. It is not possible to help you with this in place.

I forgot to deactivate that.

You should be able to view the source code now.

Try this in your custom css:

.product-category.grid_item a h5 {position:static; margin-bottom:50px}

If you had two rows of categories you would be able to set the gap between rows. That’s what the margin-bottom value does.

for best display, set the thumbnails to the same height and then add a top margin of 135 px to the h5.

I added the code to style.css and it did not change anything.
So I reluctantly activated the Jetpack login and added the code to the custom CSS stylesheet and it worked.

I am not real literate with CSS; how do I set the thumbnails to the same height? Also, if I wanted to change the background color of the text to white, for example, how would I do this?

I assume all of this should be done in the CSS stylesheet editor?

Thanks for the help.

I advise not to add the code to style.css. This file will be overwritten at next theme update.

In the the Virtue theme, custom css is added at Admin page > Appearance > Theme Options > Advanced Settings.

You don’t need JetPack if you just need the custom css function.

There are different ways of doing images. Personally I don’t like the hard crop feature because sometimes you get parts of the image cropped that you don’t want cropped. I don’t like forcing a set size because some images get stretched or squashed and don’t look right. For best results, I would standardise on an image aspect ratio for the site, and hand-edit all images to be that aspect ratio in an image editor before uploading. If all your images have the same aspect ratio they will show in neat rows.

The catalogue image size set at Admin page > WooCommerce > Settings > Products tab > Products Image sizes, should be about the same size that they are used on the page, 270px in your page. If the setting size is set too small, the thumbnails are enlarged to fit the space set by the theme and can look a little pixelated.

I have a child theme, so style.css should not be overwritten.

Thanks for the information thus far.
I will start changing some things.

Resolved.