Boost footer column text overlap problem

Boost footer column text overlap problem

John Carey -
Number of replies: 7

Hi

Am using Moodle 3.6 and the version of Boost included with it.

I'm trying to add html to the Before BODY is closed additionalhtmlfooter block in additional HTML.

All is well apart from the fact I have an email address in the first of 3 columns and it overlaps the second
column when resizing the screen. You can see this by resizing the screen when visiting:

https://moodle.haemolearning.com

I've searched everywhere but can't find a solution, hence my post here ժպտում եմ The code I'm using is attached and I'd really appreciate any help.

Thanks John

Attachment footer-column-overlap-problem-code.png
Վարկանիշների միջին թիվը. -
In reply to John Carey

Re: Boost footer column text overlap problem

Mary Evans -
Core developers Նկարը Documentation writers Նկարը Peer reviewers Նկարը Plugin developers Նկարը Testers Նկարը

Have you tried making the first column 4 and last column 5?

col-sm-4    col-sm-3    col-sm-5 

Just a thought?

Mary

Վարկանիշների միջին թիվը. -
In reply to Mary Evans

Re: Boost footer column text overlap problem

John Carey -

Hi Mary

Thanks for your reply - already tried that but the final column is then too small.

As a guide, I am aiming to reproduce the layout below

I am nearly there but totally stumped by the overlay in column one.

Any other thoughts?

John


Attachment footer-target-layout.png
Վարկանիշների միջին թիվը. -
In reply to John Carey

Re: Boost footer column text overlap problem

John Carey -

Hi

Inspired by your thinking, Mary, I decided to test out different column sizes for different screen sizes  and discovered that if I used a combination of: col-lg-3, col-lg-3, col-lg-6 it does what I want. Thanks.

Although it's solved my problem, I am still interested in finding out why the text overlapped, so if there's anyone on the forum who knows, I'd love to hear from you ժպտում եմ

Thanks again, Mary


Very best,
John

Վարկանիշների միջին թիվը. -
In reply to John Carey

Re: Boost footer column text overlap problem

Mary Evans -
Core developers Նկարը Documentation writers Նկարը Peer reviewers Նկարը Plugin developers Նկարը Testers Նկարը

Hi,

Well glad you got it to work eventually.

I'm not that well up on the ins and outs of Bootstrap 4 yet, but I suspect that its' more to do with the Additional HTML root you took. You probably did not need to add all the div containers that you added as one would have worked just as well.

Also your CSS styles could have been added in the Boost Advanced settings section. So your code would have been pretty simple and then you could have managed it via Boost's settings page.

I'll try and copy your idea and test my theory on my Moodle Test Server.

I'll let you know tomorrow how it turned out.

Cheers

Mary

Վարկանիշների միջին թիվը. -
In reply to Mary Evans

Re: Boost footer column text overlap problem

John Carey -

Hi Mary

GULP! I wouldn't know were to start using the method you talk about so am really looking forward to hearing what happens with your test. I am new to Moodle and to Bootstrap so am definitely moodling along and learning loads as I go.

Re the number of divs: I took examples from: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp and modified to suit so will have a go without as many and see what happens.

Thanks again for your much appreciated help

John

Վարկանիշների միջին թիվը. -
In reply to John Carey

Re: Boost footer column text overlap problem

Mary Evans -
Core developers Նկարը Documentation writers Նկարը Peer reviewers Նկարը Plugin developers Նկարը Testers Նկարը

Hi John, 

Actuall it worked OK. As for the divs etc. You could have left off the first container as there is one in the Boost theme‘s layout.

As for the CSS which in Boost’s case is SCSS, you can add styles in SCSS format to style your coda if you have addEd some class selectors to your code.

in fact you can add HTML via the text editor in your Moodle site course and other pages wherever you find the Text Editor.

There is a section in the top of this Forum where I have added some links to the Look & Learn / Tips & Tricks. Help files.

Hope that helps?

cheers

Mary

Վարկանիշների միջին թիվը. -