Cassiopeia on smartphones

[hedera46]

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?

[Per Yngve Berg]

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/

[Pavel-ww]

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]

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

[hedera46]

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.

[Per Yngve Berg]

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]

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]

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?

[Pavel-ww]

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

[hedera46]

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!