Frontpage Banner Content Scaling isues

[alotofentropy]

Hi everyone

I am trying to scale the divider claass frontpage-banner-content on the site home.

I have a title which is 11 characters long, and on larger screens this is fine but on mobile devices the front page titles moves off the edge of the screen and it looks unprofessional.

I am only just learning CSS but is there a way to reduce the size of the front-page title according to viewport, or re-align the text?

Another solutions is simply reducing the size of the text, but I would like to keep the title as H2.

Any suggestions for code injection, or modifying the frontpage.mustache templates would be appreciated!

[michael-milette]

Hi @alotofentropy ,

I was unable to reproduce the issue of the front-page title moving off the edge of the screen. Can you provide a screenshot? Also, what version of the theme and Moodle are you using? These will help reproduce the issue.

As for adjusting the size of the font, this can be done using CSS. You can either scale the font according to the width of the window / view port (responsive font size), or you can change the font size at certain view port sizes (variable font size).

To learn more, take a look at: https://www.w3schools.com/howto/howto_css_responsive_text.asp

You can apply this to just the frontpage if you want by specifying the id of the body (#page-site-index) of the front page.

Hope you find this helpful.

Michael Milette

[alotofentropy]

Moodle 3.11.4 (Build: 20211108

I have been editing the frontpage.scss to reduce the text size, this has worked, but Im not sure how to modify it according to the view port yet!

Just currently playing with #frontpage-banner-content

Below is an example of the width changing and seeing how the text goes of screen.

)

Oh an err sorry if youre squeamish, im running on tight time and a bit lazy to get a more general population friendly picture.

[alotofentropy]

Ok.... thanks for the link, I modified frontpage.scss to have a font size of 4.5vw rather than 2.5rem.

Is it worth changing this for everyone, or is my problem unique to this version of moodle?

[michael-milette]

Hi @alotofentropy ,

You're welcome. Glad it helped. 4.5vw looks good to me, both on desktop and smartphones. Of course this can vary depending on what text is placed in that spot. If you had a space in there, the text would have wrapped. That said, there are many words longer than SURGEONS.IS. I think it might be worth adding this to the theme for that heading. Another option you could look at is to remove the extra spacing between the letters.

Note: There are no smartphones that I know of today with a screen width of only 280px as shown in your screenshot. I think you can safely assume a minimum width of 360px.

I don't recommend customizing the theme's .scss files. As soon as you upgrade the theme to a newer release, the customizations will be overwritten. It would be much better to add your custom CSS in the Trema theme settings called Raw SCSS. You can put SCSS or CSS in there.

Best regards,

Michael Milette

[alotofentropy]

Cheers @michael-milette

Ah yeh I was thinking about updates to the theme yeh.

body#page-site-index #frontpage-banner #frontpage-banner-content {
    h2 {
        font-size: 4.5vw;
    }
}

and placed this in the Raw SCSS to be injected at end of style sheet. I cant seem to get it to work properly though.

Is there something else I am missing?

[michael-milette]

I am not near a computer right now but I noticed that the syntax of your CSS is invalid.

[alotofentropy]

After some learning this is what I used in the RAW CSS inject.

#carouselTrema .carousel-inner .frontpage-banner-content h2 {font-size: 5vw;}

[michael-milette]

This will be fixed in the next major release of Trema. There will be a new option to set the spacing of the characters in the front page title. If you have a chance, please give the experimental "dev" branch a try on a non-production site and let me know if this works for you. If it does not, please feel free to re-open this ticket.

Best regards,

Michael