Templates for Joomla! 5.x • Re: Cassiopiea Question

On screen it looks fine, as @AMurray said.
However: the image size (6618 x 1249) is much too big, especially for mobile.

This is what I would do:
1. Make 3 copies of TopBar3.webp to load on different screen sizes
- TopBar3-1200.webp for small screens
- TopBar3-2400.webp for medium screens
- TopBar3-4800.webp for big screens
2. Crop and resize the images to your desired width/size.
I used the number in the image name as the width.
1200px was the sweetspot for my iPhone 12: portrait=small, landscape=medium.

3. Load images in your module.
- Open the module and go to the codeview.
- Delete the html and replace it with* Replace the XXXX with the height of TopBar3-2400.webp

Now the browser chooses the image based on screen width.

Other options are CSS + background-image + media queries, or placing the above code in the right spot in the templates index.php file (requires/recomend the creation of a child of Cassiopeia).

Statistics: Posted by Mr. Wimpy — Wed Jul 10, 2024 10:27 am

---