Joomla Templates Club 406,261 posts

[mengler12 Friend mengler12Join date: February 2017Posts: 151Downloads:112Uploads:77 Thanks: 33]

#1059710

Hello,
I am having some difficulties using “modals’ on one of my pages. I have them inside a “Jumbotron Header” but I must have missed something when drafting the code. The issues seem as though they would be relatively easy to fix but after several days I cannot find a solution. Here are the problems with accompanying screenshots on different devices (iPhone, iPad, desktop).
iPhone – Page View – Jumbotron: here, both the “jumbotron and buttons” are all over the place. See screenshot: iPhone – Page View – Jumbotron.png
iPhone – Modal – Opened: this “opened modal” does not have any issues and everything displays as expected. See screenshot: iPhone – Modal – Opened.png
iPad- Page View – Jumbotron: On this screen, the “jumbotron” appears correctly but the “buttons” do not stay in the “jumbotron” and move into the “sidebar” location. See screenshot: iPad- Page View – Jumbotron.png
iPad- Modal – Opened: this has the same issues as when viewed in the Desktop. See screenshot: iPad- Modal – Opened.png
Desktop – Page View – Jumbotron: the buttons (modals) seem to be lining up correctly however I would like to make the all the same size. See screenshot: Desktop – Page View – Jumbotron.png
Desktop – Modal – Opened: when I open the “modal” there are 2 issues. First is that the right side “text” does not stay in the modal, it goes off screen. Second, the “CLOSE BUTTON” also does not stay in the modal. See screenshot: Desktop – Modal – Opened.png
Page url: https://bayareabusinessdesign.com/our-services/services-overview/business-plans/29-bank-compliant-business-plan

I have also supplied the “jumbotron” code: See file – jumbotron.css. Also, I have sent the cPanel URL with login and pass in a private post.

---

Attachments:

1. 
2. 
3. 
4. 
5. 

[mengler12 Friend mengler12Join date: February 2017Posts: 151Downloads:112Uploads:77 Thanks: 33]

#1059716

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1059782

Hi,

As I can see that the markup you use (row / grid) seems not correct, in Bootstrap Grid system, a row will contain 12 grids (columns).

For example, on the 1st row, you have 3 div tags and you set ‘col-xs-6’ for each so the total will be greater than 12. With 3 divs you should set ‘col-xs-4’ only.

Kindly check out the Grid system in Bootstrap here: https://getbootstrap.com/docs/3.3/css/#grid

Regards

[Author]

Posts