On our home page - www.enflow.com/index.html - we have a working slideshow code for our testimonials section… Each testimonial has varying text amounts in them.
Every bootstrap media size works/looks fine except Mobile which has too much gap space between the end of our testimonial text section and the next section which is our Contact Us section.
Can Anybody help explain to us how we can properly reduce that Gap and what we are doing wrong.
We are decent with desktop software coding but with web CSS/HTML 5 we have knowledge gaps.
The problem is that you are setting a (magic number) fixed px height for the testimonials in order to cater for the tallest testimonial. This doesn’t look too bad on desktop (unless someone zooms the text only and then it will overflow) but on mobile where the text wraps earlier and creates much taller columns for some of the testimonials and then you have big gaps appearing.
The media queries are supplying an increased height for the testimonials as the screen gets smaller and you are also giving a big top margin to #contacts because you haven’t actually worked out the correct height.
Usually with testimonials like this you would use JS to calculate the height of the tallest testimonial and set the carousel exactly as needed (and look for resize or zoom events also).
The reason that a fixed height is being used is to stop the page jumping up and down where each testimonial is a different height…
I would suggest that for small screens 768px and below you instead simply remove the height settings and then the content will adapt as required. You won’t notice the jump on mobile because the contacts will most likely be below the fold. (It would be silly to keep all the testimonials the same height when on a single column mobile device anyway).
Add this code:
@media screen and (max-width:768px){
.carousel{
min-height:0;
max-height:none;
}
#contacts{margin-top:20px}/* was 350px!! */
}