Mobile version for image header and categories widget

Hello, Mauro,

Thank you for reaching out to us.

https://prnt.sc/_R4iV2XBMlYI – please provide correct credentials.

Additionally, we would appreciate it if you could share some screenshots to help us better understand your request.

We look forward to your response.
Best Regards,
8Theme’s Team

Hello, Mauro,

1/ Yes, these settings can be used https://prnt.sc/kNjsLsuQbb7j

Please note that elements hidden in this manner are still being loaded, even though they are not displayed. This means that large images, whether in kilobytes or even megabytes, can affect the website’s loading speed. Therefore, we strongly recommend optimizing your images – https://www.8theme.com/documentation/xstore/troubleshooting/how-to-speed-up-my-website/

Read more – https://elementor.com/help/mobile-editing/ https://elementor.com/help/what-is-responsive-design/ https://elementor.com/blog/responsive-website/

2/ At the moment, the option you are inquiring about is not available. You can view more details here: https://prnt.sc/i1O1OIf3geLI

If you would like to request the addition of new features or options, we kindly invite you to submit your suggestion on our Taskboard at the following link: https://www.8theme.com/taskboard/. Should your request receive sufficient support from other customers, our development team will carefully consider including it in one of our future updates.

Currently, you can use custom CSS code – https://prnt.sc/DO0mWY47XO_O

Best Regards,
8Theme’s Team

Hello, Mauro,

You’re welcome!

This question does not directly pertain to the scope of our theme. However, you can find the relevant basic information online:

Yes, it’s absolutely possible to use the element in HTML5 to handle responsive images and pass different image versions for different screen sizes, resolutions, or other conditions, all within a single element. This way, you can keep your markup clean and reduce the need for multiple elements.

The element allows you to specify multipleelements inside it, each with different image files and conditions (like media queries or srcset for different screen resolutions). This makes it ideal for responsive images because the browser will automatically choose the most appropriate image to display based on factors like viewport size, device resolution, or format support (e.g., WebP vs. JPEG).

Here’s a basic example of how to use the element:

html

<picture>
  <!-- For screens wider than 1200px, use the large image version -->
  <source srcset="images/large.jpg" media="(min-width: 1200px)">

  <!-- For screens between 768px and 1199px, use the medium image version -->
  <source srcset="images/medium.jpg" media="(min-width: 768px)">

  <!-- For smaller screens, use the small image version -->
  <source srcset="images/small.jpg" media="(max-width: 767px)">

  <!-- Default image (if no conditions match) -->
  <img src="images/default.jpg" alt="Responsive Image Example">
</picture>

How it works:
The browser will check theelements and choose the one that matches the conditions (like viewport size or screen resolution).
If noconditions match, the browser will fall back to the tag.
This ensures you only have one element in the DOM, but still serve the appropriate image for different scenarios.
Benefits:
Reduced HTTP requests: Instead of loading all image versions and choosing them dynamically with JavaScript, the browser decides which one to fetch.
Efficient loading: The browser selects the right image based on device capabilities and screen size, ensuring faster load times and a better user experience.
Fallback support: You can define a default image in the tag in case the browser doesn’t support (though most modern browsers do).
Using srcset in thetag:
You can also use srcset for different image resolutions (e.g., 1x, 2x for retina displays) if you want to optimize for pixel density, like this:

html

<picture>
  <source srcset="images/large.jpg 1x, images/large@2x.jpg 2x" media="(min-width: 1200px)">
  <source srcset="images/medium.jpg 1x, images/medium@2x.jpg 2x" media="(min-width: 768px)">
  <source srcset="images/small.jpg 1x, images/small@2x.jpg 2x" media="(max-width: 767px)">
  <img src="images/default.jpg" alt="Responsive Image Example">
</picture>

In this case:

The browser will select the appropriate image based not only on the screen width but also the device’s pixel density (1x, 2x, etc.).
This is a very efficient and flexible way to serve responsive images without cluttering the DOM with multiple tags.

Best Regards,
8Theme’s Team

Hello,

If you would like to request the addition of new features or widgets, we kindly invite you to submit your suggestion on our Taskboard at the following link: https://www.8theme.com/taskboard/. Should your request receive sufficient support from other customers, our development team will carefully consider including it in one of our future updates.

Best Regards,
8Theme’s Team