Cassiopeia Banner render issue on mobile?

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Ehrhardt
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Aug 02, 2018 3:05 pm

Cassiopeia Banner render issue on mobile?

Post by Ehrhardt » Mon May 23, 2022 6:50 pm

Looking at cassiopeia.joomla.com on my mobile appears that the background image is not rendering to the right size:
on-mobile.jpg
But on Firefox Responsive tool, it appears to render as one might expect it to:
on-firefox.jpg
I've also done a child template and modified with my own images and seem to have the same issue, that on Mobile devices, the background image does not appear to resize properly (but looks okay in firefox responsive tool). I have also seen same issue on ipad/Safari for the cassiopeia demo site.

Running V4.1, latest versions of Joomla/Cassiopeia template. Any insight/help you can share? Thanks.
You do not have the required permissions to view the files attached to this post.

Ehrhardt
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Aug 02, 2018 3:05 pm

Re: Cassiopeia Banner render issue on mobile?

Post by Ehrhardt » Wed May 25, 2022 4:25 pm

220525-PrtScrn-0000.png
This is the CSS involved. On smaller screens, the only difference seems to be height: 100vh (for large) and 70vh for small. However, the image does not shrink to fit the window. Please provide some insight?
You do not have the required permissions to view the files attached to this post.

Linelabox
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Jan 22, 2018 10:34 am

Re: Cassiopeia Banner render issue on mobile?

Post by Linelabox » Thu May 26, 2022 6:03 am

It would be great to extend the Custom module layout with another option e.g. banner_image.php and replace the style="background image" with "<image>" tag.

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia Banner render issue on mobile?

Post by joomtheme » Thu May 26, 2022 9:23 am

Cassiopeia template is a disappointment.

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia Banner render issue on mobile?

Post by joomtheme » Thu May 26, 2022 9:25 am

Code: Select all

@media (max-width: 767.98px) {
.container-banner .banner-overlay {
    height: 50vh;
}
}
Try as above.

Ehrhardt
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Aug 02, 2018 3:05 pm

Re: Cassiopeia Banner render issue on mobile?

Post by Ehrhardt » Thu Jun 09, 2022 2:41 pm

Thanks for your suggestion, I did try this and still the background picture does not shrink to fit container on a real iPhone. On Firefox Responsive design inspector it does.

Ehrhardt
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Aug 02, 2018 3:05 pm

Re: Cassiopeia Banner render issue on mobile?

Post by Ehrhardt » Fri Jun 10, 2022 2:28 am

This is the CSS that fixed the render on Mobile (but causes loss of parallax on all screens):

/* Fix Render on Mobile */
.container-banner .banner-overlay {
background-attachment:scroll;
}

I liked the parallax, however I like a rendered image better. If someone can explain or provide alternative, would be helpful.


Post Reply

Return to “Templates for Joomla! 4.x”