Cassiopeia on smartphones

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
hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Cassiopeia on smartphones

Post by hedera46 » Fri Jun 02, 2023 9:21 pm

I've been playing with Cassiopeia on my staging site, https://upgrade.rockridgencpc.com, running Joomla 4.3.1. So far the web site, in my browser, looks pretty good; I've tried it in Edge, Chrome, and Firefox, on Windows 10. Not perfect but acceptable.

Then I tried the site on my smartphone (Android 12; not having an iPhone, I can't test that). I have 2 modules that I really want to be immediately visible, which don't look good in top-a and top-b. I put them in sidebar-left and sidebar-right, and they look very good - but on Android they are displayed below all the blog entries, which take up quite some space. They're essentially invisible on a phone unless you're really curious.

I'm going to play with module placements, but - is there any way I can modify Cassiopeia so the sidebar modules are displayed before the blog entries? Alternatively, is there any way I can put 2 modules in one position (say, top-a) and have them displayed next to each other?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30815
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Cassiopeia on smartphones

Post by Per Yngve Berg » Sat Jun 03, 2023 6:19 am

Two or more modules can be put in one position and styled inline with the correct "Class suffix" and Layout settings.

I would have put the logo into the header instead of the banner. Styles in template and select your Logo.

https://magazine.joomla.org/all-issues/ ... ips-tricks
https://getbootstrap.com/docs/5.1/helpers/stacks/

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia on smartphones

Post by Pavel-ww » Sat Jun 03, 2023 8:21 am

hedera46 wrote:
Fri Jun 02, 2023 9:21 pm
I'm going to play with module placements, but - is there any way I can modify Cassiopeia so the sidebar modules are displayed before the blog entries? Alternatively, is there any way I can put 2 modules in one position (say, top-a) and have them displayed next to each other?
Hi. I think this will help you viewtopic.php?f=815&t=996442#p3675648

hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Re: Cassiopeia on smartphones

Post by hedera46 » Sat Jun 03, 2023 2:23 pm

Thanks very much, I'll read those references and try things out.

hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Re: Cassiopeia on smartphones

Post by hedera46 » Sat Jun 03, 2023 11:25 pm

To Per Yngve Berg: Cassiopeia doesn't offer me the option to use the header for my logo. Highest position I can use is top-bar. I'm trying that.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30815
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Cassiopeia on smartphones

Post by Per Yngve Berg » Sun Jun 04, 2023 6:39 am

hedera46 wrote:
Sat Jun 03, 2023 11:25 pm
To Per Yngve Berg: Cassiopeia doesn't offer me the option to use the header for my logo. Highest position I can use is top-bar. I'm trying that.
The Logo Position is not a Module Position. The Logo Image File is selected in Templates->Styles->Cassiopeia_Default
That will replace the Site Name Text in the left of the header.

hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Re: Cassiopeia on smartphones

Post by hedera46 » Sun Jun 04, 2023 9:44 pm

I see your point. However, I realize I didn't make something clear: I tried the logo image in the position and it looked awful; much too big, for one thing. But I have a module I created, which includes the logo image and a brief text suggesting people sign up for our email lists; and that's what I've put in top-bar and I'm quite pleased with it, especially since the module lets me reduce the size of the logo image somewhat.

hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Re: Cassiopeia on smartphones

Post by hedera46 » Wed Jun 07, 2023 1:42 am

I have Cassiopeia behaving much better now but I have a question. Using this CSS, I was able to put 3 modules in top-a, and they display horizontally in the order in which I assigned them:

container-topa { display: flex; flex-wrap: wrap; }

I have 4 small modules that I want to assign to sidebar-right, vertically. I assigned them in the order I wanted them to appear, but they are "upside down" - the one I wanted on top is on the bottom, and so forth. I tried putting what I thought was the equivalent CSS in my user.css (I've created a child theme). No effect on the order of items in sidebar-right. Here's what I put:

container-sidebarright { display: flex; flex-wrap: wrap; }

How do I get control over what order those modules appear in the vertical sidebar position?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia on smartphones

Post by Pavel-ww » Wed Jun 07, 2023 7:12 am

hedera46 wrote:
Wed Jun 07, 2023 1:42 am
I have 4 small modules that I want to assign to sidebar-right, vertically. I assigned them in the order I wanted them to appear, but they are "upside down" - the one I wanted on top is on the bottom, and so forth.
Hi. Sort the modules by position. Click on (1), drag and drop by (2) to make order you like.
1.jpg
You do not have the required permissions to view the files attached to this post.

hedera46
Joomla! Intern
Joomla! Intern
Posts: 73
Joined: Tue Oct 09, 2007 11:04 pm
Contact:

Re: Cassiopeia on smartphones

Post by hedera46 » Wed Jun 07, 2023 9:45 pm

It took me a while to figure out how to enable the 3-dot menus so I could drag and drop things, but I think it worked! I'm now waiting for the site to refresh. Thank you!


Post Reply

Return to “Templates for Joomla! 4.x”