Link to home
Start Free TrialLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

Chrome, Bootstrap: Vertical gaps between elements not consistent during web page resize

I am new to Bootstrap and Grid layout.

Here is a link to the website in question:

http://utahkidsfoundation.com/test2/index.html

Look at the attached image to see where I am noticing large gaps between the content depending on the size of the page (indicated by red arrows):

User generated image
How do I keep the vertical spacing consistent while the column content wraps (during resizing)?
SOLUTION
Avatar of Mohamed Elazab
Mohamed Elazab
Flag of Egypt image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tom Knowlton

ASKER

Why is fixed image the problem?

How do I fix it?
here
    <div style="position:fixed;top:65px;z-index:7;" class="navbar bannerr w3-animate-fading carousel-container">
                <ul>
                    <li>
                        <img class="w3-sepia-max carousel-image" alt="C1" src="images/mainpage/c1.jpg" />
                    </li>
                    <li>
                        <img class="carousel-image" alt="C2" src="images/mainpage/c2.jpg" />
                    </li>
                    <li>
                        <img class="carousel-image" alt="C3" src="images/mainpage/c3.jpg" />
                    </li>
                    <li>
                        <img class="carousel-image" alt="C4" src="images/mainpage/c4.jpg" />
                    </li>
                    <li>
                        <img class="carousel-image" alt="C5" src="images/mainpage/c5.jpg" />
                    </li>
                    <li>
                        <img class="carousel-image" alt="C6" src="images/mainpage/c6.jpg" />
                    </li>
                    <li>
                        <a href="#esf">
                            <img class="carousel-image" alt="C7 empty stocking fund" src="images/mainpage/c7.jpg" />
                        </a>
                    </li>
                </ul>
            </div>

Open in new window


try change position:fixed
Change position: fixed to position:relative ?
I want the image to STAY at the top -- where it is currently located.

I just don't want such a large gap between the image and the main content.
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
How do I close the question?