monitor margins causing a variety of visual impacts

Check out my website at the following link:

Visit Homepage

Upon visiting the page, you will notice two boxes - one labeled "Get Started" and the other "Try It Free". Below is the HTML code I used to create 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;">&nbsp;&nbsp;
           <span style="font-size:20px;color:white;margin-right:205px;margin-left:205px">Explainer Video</span>&nbsp;&nbsp;
           <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>

I'm facing issues with this setup not displaying correctly on all monitors. My assumption is that it's due to the margins. How can I rectify this to ensure proper alignment across different screens?

A.) The desired outcome is for it to be centered directly below the bars. B.) I suspect the problem lies in specifying margin-left in pixels, which may not adjust well on all monitor types.

I envision having the images right above the buttons in a centered position. However, using margins to position the buttons is causing complications.

htmlcssbutton

Answer №1

Once the site width decreases to below ~1100px, several issues start cropping up. It seems like there are too many absolute widths being used in margins for different components to function well across various window sizes.

Given that the site is already constructed using the Bootstrap framework, it would be beneficial to familiarize yourself with how to set up columns and rows. Try organizing the elements in your top section into columns to ensure a smoother flow of content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a dynamic menu icon using CSS?

I am currently developing a CSS animation that is inspired by this. I have made progress and almost reached my goal, but I am facing some difficulties in getting it to work perfectly. For those unable or unwilling to visit the links: I aim to create an ani ...

htmlcssanimationsass

Utilize Flexbox to occupy the rest of the available space

I would like the center row to occupy the entire browser width just like typical websites. Even if there is minimal content, I want the middle row to fill up the whole space. Below is the CSS code: @import "compass/css3"; .wrapper { display: -webkit-b ...

cssflexbox

Completing a form with editable content - using PHP and HTML

I've browsed through numerous questions here, but I haven't found a solution that works for me. Here are the instructions I'm working with: $query = "SELECT nazwa,rok_prod,wypornosc FROM statek where id_statek=$id"; $wynik = pg_query($query ...

phphtmlpostgresql

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

htmlcssreactjstypescriptmaterial-ui

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

Rows in a table materialize and fade away

Why does the row show for less than one second and then disappear when I click on the button? Everything works fine when I delete the form tag. How can I make it work without having to delete the form tag? Check out the code below: <html> <head ...

javascripthtmlasp.net

Is there a way to deactivate or dim a specific hour in an HTML time form?

I am currently facing a challenge with my booking form. I need to find a way to grey-out or disable the hours/times that have already been booked by previous customers. This will help ensure that the next person can select a different time slot. However, I ...

javascripthtmltime

Shifting a div from side to side

I don't have much experience with coding, so I was hoping for some assistance. My goal was to create a div that moves back and forth using toggleClass; $('div').on('click', function() { $(this).toggleClass('active') ...

javascriptcssanimation

What could be causing my widget to not function properly with Django and Bootstrap?

I am currently working with the following Boostrap code in my HTML: <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest"> {{form.data_contabile|as_crispy_field}} <div class="input-group-append" data-target="# ...

htmldjangobootstrap-4django-formsdjango-templates

Using window.open and appending a new feature to it

Below is the code found in my index.html file: <!DOCTYPE html> <html> <head> <script> function createDialogBox() { var dialogBox = window.open("in1.html"); dialogBox.nameBox= "my little box" } window.onload = createDialogBox; wind ...

javascriptjqueryhtmldom

Differences between -webkit- and -moz-transition

My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...

csswebkitmozillacss-transitions

What is the CSS selector used to target elements that are not contained within another selector?

There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...

css

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the ...

htmlcsstwitter-bootstrapbootstrap-5

After a refresh of the single-page site, the header is not the first thing displayed

Upon refreshing the site, I encounter an issue where the header does not display first. Instead, it directly leads me to the contact section located further down the page. Has anyone else experienced this problem and found a solution? It's worth menti ...

javascripthtmlcss

The divs descend one after another with no problems related to margins or padding

Having some trouble creating a unique WordPress theme with Bootstrap3. I can't seem to get my divs to behave properly and I've tried everything from display: inline, vertical-align: top, floats, clears, etc... but nothing seems to work. Here is ...

htmlcsswordpress

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

Arranging elements within a div using inline positioning

Currently, I am trying to arrange elements within a div. Below is the div that needs positioning: https://i.sstatic.net/5nZUt.jpg This is the desired layout: https://i.sstatic.net/vXSV9.jpg Here is the HTML and CSS code snippet: #channel-header * { ...

htmlcsselement

Modify the Calendly widget CSS with a media query to adapt it to different screen sizes

Hey there, I'm new to CSS and I'm struggling with getting rid of the vertical scroll bar that shows up on mobile for a calendly widget. Here's the embed code for the widget: <div class="calendly-inline-widget" data-url="https://cale ...

javascripthtmlcsswordpresscalendly