Lead-Info visible on small screens, show minimal text (ie - icons instead?)

synapsis

I'm trying to make the module in position: lead-info visible on small screens. I'm using it for our phone number and Google maps link. So it definitely needs to be visible on phones. Right now, it's configured to not display on small screens using Bootstrap's t4-header-left d-none d-lg-flex styling.

Please advise what CSS to add to my custom CSS so that this module will display on phones and tablets. I will likely also need to reduce its width to two lines -- or even show separate phone and map icons to make it fit.

Thank you!

(I've clearly got some Bootstrap 5 stuff to learn here, and will, but greatly appreciate the right answer on this one. Thanks!)

saguaros

Hi synapsis

You can check out documentation of BS5 for how to work with elements: https://getbootstrap.com/docs/5.0/utilities/display/#hiding-elements

synapsis

Thanks. Very enlightening. I'll give it a shot.

synapsis

Okay... I think I've figured out how I want to proceed with the module itself: putting in content that shows on large screens and content that shows only on small screens (icons), etc.

However, I still need to override the template somewhere to remove the style that hides the module entirely on small screens (so I can control what shows or is hidden from within the module itself).

Would you kindly please point out the change I need to make and where, to remove the module's directive to hide on small screens? I don't want to mess it up this close to the finish line.

saguaros

synapsis Do you mean the header, right?

You can go to Layout settings in template >> edit the header block and edit class as you wish:

synapsis

It would be an edit to the lead-info module, which is styled in the HTML of the template, rather than the CSS. So a simple custom CSS edit won't do the trick. I need to change the template HTML, as you've suggested, but I want to make sure I'm doing it correctly as an override, rather than a direct edit of the template, so it won't get undone upon future template updates.

I'm still new to J4 and Bootstrap5 and want to know the RIGHT way to do this override, rather than editing the template directly. Unless what you described IS how overrides are done. I'm trying to learn. I hope you'll share.

Matt

saguaros

Hi Matt,

For example, with the 'header-10' block you're wanting to customize but this block will be overwritten when updating new version of template so you can look for the file of this block:

/templates/ja_blockk/html/layouts/t4/block/header-10.html

just duplicate this file + rename to a new one, something like: header-15.html

Then edit as you wish + change to use this new block in the Layout settings of template.

This new block will not be affected when updating new version of template.

Regards

synapsis

Thank you sir. Exactly what I was looking for.

Have an awesome day.

Matt