I was hoping to get some insight from someone much more well versed in html/css, but in the meantime I figured out something that is sufficient so I thought I'd share. Just a reminder: We are on Jive-x Cloud.
First I'll share a visual overview of what the footer looks like and how it functions. Then I'll share how to apply a custom responsive(ish) footer. then I'll attach the CSS and HTML files.
I'd LOVE for any advice to clean it up or simplify it! Again, I'm no CSS ninja! As I inquired about this with some of my colleagues, some mentioned that flex-boxes might be a good route to go. I didn't have time to learn more about them or how they might work for my scenario.
So I'm attaching the CSS and the HTML which can be added by following these steps:
- Visit the Themes editor in Jive.
- Click Advanced > Custom > Edit Now
- Click Custom Footer
- Paste the CSS and HTML in the respective boxes.
- You'll want to replace my icons by adding your own images (We use Icons8 and love it. Totally worth buying a license!)
- Click Apply and be sure to save/publish the theme if all looks good!
In the html file I've created a simple thread "DOUBLE_CLICK_AND_ENTER_URL_HERE" that will allow anyone who uses this to easily replace the link destinations.
NOTE: This jive community did not allow me to add an html file so I renamed the html file with an extension of ".txt" but it is actually html. All you will do is copy and paste it into the HTML box in Jive.
1 person found this helpful
Well, a few hints...consider using min-width and max-width in your css rather than "width"
This makes things a bit more flexible.
Also start using more responsive spacings, like "em" and "vw" and "vh". vw is percentage based so it's much better for mobile devices than px. Px is locked to px which doesn't scale well.
This is great feedback, Doug! I'll have to study up on these a bit!