phpmyadmin/website

empty box space in screenshots

Closed this issue · 4 comments

Visit:
https://www.phpmyadmin.net/try/
See 'empty space' under 'Server monitor' screen-shot:
emptybox
Browser: FireFox, OS: Ubuntu

nijel commented

Confirmed

You have to add some <div class="clearfix visible-xs-block visible-sm-block"></div> and <div class="clearfix visible-md-block visible-lg-block"></div> at the end of each possible row for each different width. This should solve the problem. If you show me where, I can do a PR.

Probably the affected file is https://github.com/phpmyadmin/website/blob/master/pmaweb/templates/try.html but I haven't looked at it too closely.

We need a .clearfix after a width of 12, which ends up in a structure like this:

<div class="row">
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="clearfix visible-xs-block visible-sm-block"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
  ...
</div>

We can replace <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div> by <div class="clearfix"></div> because it's the same.
That means we have to add a .clearfix every two columns.