Is the scaling on carousel-caption off?

[drtom]

One more I give up on and seek your assistance on.

The caption on the carousel consists of two parts: fs-2 and fs-4 (as far as I can understand).

Other than edit the actual text, I've only altered fs-2 by changing the font family and color and have done nothing to fs-4. Nothing at all.

On smaller devices, 600pxls and below (very ballpark guesstimate), fs-2 goes completely off-screen and fs-4 scoots to the top. Something is definitely wrong.

To my eye the font is not scaling well, if at all, which may be why the caption is partially disappearing.

Or . . . could it be position: absolute? Or what?

Screenshot from 2025-07-04 19-41-55.png

[heatherbell]

Something is definitely wrong.

The paragraphs (set in the text in the Adverts) have Bootstrap font size classes fs-2 and fs-4 which size and scale the text.
Check your Dev Tools to see the native Bootstrap styling.
There are a few things you can experiment with in your CSS to achieve whatever you desire.
You'll see in Dev Tools, for example, the fs-4 on small screens is:

Code: Select all

 .fs-4 {
    font-size: calc(1.275rem + .3vw)!important;
}

which could be overridden in CSS. The same would go for the fs-2
There's also a lot of space at the bottom that comes from the default paragraph margin bottom and the carousel-caption padding bottom both of which could be overridden with CSS.

[burt]

https://getbootstrap.com/docs/5.3/compo ... /#captions

Bootstrap example hides the caption in small viewports.

[drtom]

OK. Thank you.

As I understand it, the caption indeed does not scale well. So, I can figure out how to get it to scale properly or I can just hide it when it misbehaves.

I think a third option would be to disable the caption altogether.

I will work on it.

[drtom]

OK, I can get the two paragraphs to scale fairly decently, but I haven't been able to isolate the particular instances of those classes, so other instances are also scaling.

I thought div.carousel-caption p.fs-2{} would do the trick, but no cigar.

So now I've been looking for the html file so I can add an ID to those classes. Where is that file?

Wait! I think maybe the above did work.

[heatherbell]

I thought div.carousel-caption p.fs-2{} would do the trick, but no cigar.

The parent element of that carousel (and every parent element in Phoenix Cart) already has a unique class.
Use Dev Tools (or look in the tpl_ file of the module, eg, https://github.com/CE-PhoenixCart/Phoen ... der.php#L1) to see that this Carousel has the unique class cm-i-slider.
For example:

Code: Select all

.cm-i-slider .fs-2 {
  color: blue !important;
}

targets elements with the class fs-2 that are a descendant of parent element with class cm-i-slider (note the space between the two class names).
So that gives the result on this demo: https://psiwebsites.com/1103/
Of course, that changes the fs-2 that exists in both slides (but nowhere else on the site).
If it was desired to only target the text of one of those slides, a custom class could be added to the text in the specific Advert and then target that instead of fs-2.