Set the height of the image
-
https://ibb.co/KpgNMn69
I’d like to know how to set the height of this element so that the image automatically adjusts to the width?
The default settings for this component don’t accurately reflect the image’s pixel ratio.
Hello,
Edit your Image / SVG widget in WPBakery.
In the Image Size field, either:
Choose a standard size like full or large or enter only the width, 400px — leaving the height blank ensures it auto-adjusts according to the image’s ratio.
See Screenshot for better understanding: https://postimg.cc/0MKPkNmw
Best Regards,
https://ibb.co/fVxyxLPt
I’ve set the class and the image size, but I want the Product Categories component to not display text on mobile devices. How can I do this?
Hello,
Can you please share some screenshots of the text which you want to hide on mobile along with the page URL where it is situated, so I can further check and give you a possible solution?
Best Regards,
What I want to achieve is to retain the text on the computer but hide the product category names on the mobile device.
I set the Extra class name to categoryyimg1 for Product Archive in the Layout.
Hello,
Can you share the page URL so I can further check on your site and give you a possible CSS code.
Best Regards,
I’m so sorry, I forgot to send you the website link. Do you need the administrator login link?
Hello,
Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.
.wd-cat-content.hover-mask {
display: none;
}
Best Regards,
This CSS code affects the display of the entire website, I want CSS code that can be set separately.
Hello,
Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.
.term-premier-league .wd-cat-content.hover-mask {
display: none !important;
}
This will hide the category text only on the Premier League category page and affect mobile devices only.
Best Regards,
However, my product category page is set up using a layout. Is it possible to set the code within the layout so that I don’t need to set custom CSS for each product category?
Hello,
Since you are using a Layout for the product category page and added the extra class categoryyimg1, you can target that specific layout instead of adding CSS for each category separately.
Please add this CSS in Theme Settings > Custom CSS > Custom CSS for mobile:
.categoryyimg1 .wd-cat-content.hover-mask {
display: none !important;
}
Best Regards
.
