Appropriate font-size of caption carousel Bootstrap in small screen: how?

I cannot figure out how to enlarge the font-size h5 of the caption/incarousel/bootstrap4, in the telephone, either portret or landscape view.
This is the site: Appelscha-Staveren. See the style.css in this link (page source), it contains some trial of Query which does not do the trick.
Thanks for any help.

Hi there

you may use this css code to change the h5 font size:

.carousel-caption h5 {
font-size: 30px;
}

Regards

Thanks, helps for the telephone size, but not for the PC: letters are too big then.
Also used already: font-size: 2vw, same effect.

Hi

Ok, then you can wrap that code in the media query:

@media only screen and (max-width: 600px) {
.carousel-caption h5 {
font-size: 30px;
}
}

Funny: result: but what did I do? Telephone: navbar: desktop version: on! Then the response = 30 px, only landscape view best, still too small on portret …
But, I have some … reaction on this. I tried this query role befor: no effect what so ever. I understand it, at least more or less, because I am not experienced, my assistent in this scene is busy with a … house renovation. Now I have to do things … myself.
There can be some improvement on the portret view also, I’ll figure this out myself…
And screen of PC: same size! Thanks a lot!

Hi there

Im sorry, @fieldbicycle but to be honest I don’t clearly understand your last message, I only need clear and very short description of the problem :slight_smile:

Well, I only have some improvement in font-size in the telephone when I have Desktop version: on (nav-bar browser). But, even with 200 px font-size, letters do not enlarge accordingly, on the telephone. On de PC: screen: letters of caption have just the default size, of h5.

Now: CSS: (please try yourself).
@media only screen and (max-width: 600px) {
.carousel-caption h5 {
font-size: 200px;
}
}

Hi

Please clear cache and try again, code is working and effect is applied: Screenshot by Lightshot

Thanks a lot, I have seen your screenshot: I cleaned Chrome: Settings, Privacy & Savety: clean browserresults: cookies.: no result, still small letters. I’ll lower the pixels to 30px. I’ll check on other telephone.
Screenshot by Lightshotscreenshot from Gal S5

May I ask: how do you get the details of the screens size in the lightshot picture?

hi

Well, its now 30px and you can see this on this screenshot: Screenshot by Lightshot

screen size details can be displayed in dev tools, check again my screenshot

Thanks again for the display with 30px (could be in em as well = responsive)

  1. I don’t know these developer tools, yet. Question: I think your picture is performed with a PC: one fills in the dimensions of the telephone, tablet, whatever. Am I right? I’ll look this up, thanks for it.

  2. I did my homework and checked out in various telephones: conclusion: the Iphone with Safari: performs as wished, but, al the others, Samsung old (5), new (10, cache reg. deleted), type Samsung A40 (?), Huawei: all with Chrome Android: all the small letters!

  3. New approach is still necassary: this I found, viewport-caracteristics. I used the line with .86 and I skipped the query. The results: portret Android Chrome Gal S5. Landscape: text a bit above bottom. (put margin-bottom: - 5px).

  4. Also found some zoom solution: see CSS, via Google ( : How to make Bootstrap carousel scalable/zoomable by mobile touch where keeping default slide behavior?StackOverflow).

  5. Touch/swipe does not work only with this viewport adjustment. But found something:
    link: XXXX//css-tricks.com/almanac/properties/t/touch-action/, what I did now, see CSS, gives only a swipe to the left … may be succes for also to the right, I have to work this out, more suggestions are given in the article. (change theX XXX with: https:// etc.)

Got it!

: letters as wished (viewport), zoom and pan to the left ánd to the right! Hope its working in Iphone! But I think it does, now also in Android!
See the style.css.
Thanks for all your support, learned!

Hi there

Ok, that’s nice to hear you found a solution and resolved the issue,

Please consider such off-topic questions is better to research in the web, you will find answers quicker

You were the only one who took the effort to test in … dev tools. Put this question also on StackOverflow: only one answer like: please give html/css, which is easy to get via the link, + there it is quite difficult to give a good performance of the lines (of HTML/CSS etc). Only succes in giving these in a compact way. Never got any real answer, you did :).
Obv. the @media query formula does work in dev tools, but … not in the Android system itself… There is a metatag in the bootstrap carousel which gives result for Apple systems! Therefor I got result with the Iphone! Etc, the rest of the story you know now. Thanks for your … support!

Ok :slight_smile:

Thank you too and have a great day