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):

resize.jpg
How do I keep the vertical spacing consistent while the column content wraps (during resizing)?
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mohamed ElazabteacherCommented:
i think fixed  img  is the problem
0
Tom KnowltonWeb developerAuthor Commented:
Why is fixed image the problem?

How do I fix it?
0
Mohamed ElazabteacherCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tom KnowltonWeb developerAuthor Commented:
Change position: fixed to position:relative ?
0
Tom KnowltonWeb developerAuthor Commented:
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.
0
lenamtlCommented:
Hi,

First you have several inline CSS this won't work  with responsive / Bootstrap because you need flexible value depending of the media queries so you cannot use fixed values.

Also you don't use Bootstrap 3 syntax correctly and each row must be a total of 12
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Open in new window


check Bootstrap3 docs
https://getbootstrap.com/docs/3.3/css/#overview

So because of those problems your website won't display correctly and will have gap ect.

you will need to create class for each element that have hardcoded style value
for example let take Utah Kids
<h1 id="sectiontitle" class="row centerelement"
style="position:fixed;
               z-index:6;
               height:100px;
               width:100%;
               top:380px;
               background:linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%);"
>
         Utah Kids Foundation
</h1>

Open in new window


you will have to remove that part
style="position:fixed;
               z-index:6;
               height:100px;
               width:100%;
               top:380px;
               background:linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%);"

Open in new window


then create a class in your CSS file
let called it mytitle
then add the CSS code to that class then add the class name

<h1 id="sectiontitle" class="row centerelement mytitle">
         Utah Kids Foundation
</h1>

Open in new window


Then add row check syntax and check total of the columns to have total of 12.

After this if you want different CSS for that item depending of  for the size
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://getbootstrap.com/docs/3.3/css/#grid-media-queries

There is a lot of work to do and syntax to learn, you may want to buy a premium Themeforest Bootstrap templates then learn from it.

Good luck
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom KnowltonWeb developerAuthor Commented:
How do I close the question?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.