TAGS :Viewed: 9 - Published at: a few seconds ago

[ margins on monitor creating different effect ]

Here is a link to my webpage:

Homepage

If you look, there are two boxes. One says "Get Started" and one says "Try it free". Here is the HTML I used to generate them:

    <div style="margin-top:-100px">
        <span style="margin-right:525px;font-size:18px;font-weight:bold;color:white;">Make money for a referral</span>
        <span style="margin-left:-15px;font-weight:bold;font-size:18px;color:white;">Hire the best candidate</span>
        <h5>
           <img src="images/bluuhorn.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px;">  
           <span style="font-size:20px;color:white;margin-right:205px;margin-left:205px">Explainer Video</span>  
           <img src="images/Company.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px">
        </h5>
    </div>                              
</div>
</div>
</div>
<div>
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:150px"><span style="color:white;font-size:18px">GET STARTED</span></button>
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:470px"><span style="color:white;font-size:18px">TRY IT FREE</span></button>
</div>

Apparently this isn't going to work on every monitor. I imagine its due to the margins. How do I fix this so it comes up centered on every monitor?

A.) I expect it to be centered directly underneath the bars. B.) I anticipate the problem is im setting margin-left to certain pixels and that isn't going to layout correctly on every type of monitor.

I'd like the images to be directly above the buttons-centered. Unfortunately, i set the buttons using margins and that's causing issues.

Answer 1


There are a bunch of issues with the site when the width drops below ~ 1100 px. You are using too many absolute widths defined in margins to make those components work for all window sizes.

The site is already built using the Bootstrap framework. Therefore read up on how you setup columns and rows and put the elements in your top section into columns to get this stuff to flow properly.