Tips for resizing all HTML elements when adjusting browser window dimensions

I am working with the following HTML code snippet:

<div id="sectionOne" class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height: 80vh;">
  <div class="row d-flex justify-content-center" style="color: #0069d9">
    <h1 >Section One</h1>
  </div>
  <div class="row section-one-row d-flex justify-content-around">
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card A</h3>
            <h5>
                Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card B</h3>
            <h5>
                Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4 text-center">
        <div style="padding: 40px">
        <div class="card-item" style="padding: 40px;">
            <h3>Card C</h3>
            <h5>
              Some text here. Some text here. Some text here
            </h5>
        </div>
      </div>
    </div>
  </div> 
  <div class="row section-one-row d-flex justify-content-around">
    <div class="col-12 d-flex justify-content-center">
      <button id="caption-button" class="btn btn-primary">Get Started!</button>
    </div>
  </div>
</div>

My issue is that when I resize the browser window, the elements in this section become misaligned. How can I address this problem? Is there a way to make sure all elements adjust proportionally when the browser window size changes?

https://i.sstatic.net/eNrDr.png

htmlcssbootstrap-4

Answer №1

It appears that there could be some additional HTML and CSS missing in this code snippet. To address this issue, I recreated the page on CodePen and added extra CSS to make the two resemble each other more closely.

#sectionOne{
  background: black;
}
#caption-button{
  border-radius:25px;
}
body{
  background:white
}
.card-item{
  background:white
}

However, I am still struggling to reposition the title or button outside of the container. Could you specify which elements need resizing and what your desired outcome is?

Answer №2

Consider changing the "lg" in the grid class to "sm". For example, col-lg-4 text-center can be changed to col-sm-4 text-center. To learn more about this, you can visit the Bootstrap website (https://getbootstrap.com/docs/4.3/layout/grid/). There, you will find class names based on the size of the window or device you are using for your webpage.

Answer №3

After some investigation, I have finally uncovered the solution and will share it here for future reference. The issue stemmed from the initial div component having a fixed height set to style="height: 80vh;", causing it to be rigid and unresponsive to changes in the browser window size.

By removing the style="height: 80vh; attribute, the div now dynamically adjusts its height to accommodate all elements within the component as the window size is altered.

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

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

javascriptcssreactjs

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

javascriptcsswidth

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

javascripthtmltabs

Is there a way to show output on render rather than using console.log in node.js?

I have successfully sorted the objects as shown in the link below. My next challenge is to integrate the sorted object into my render function rather than just using console.log(). I'm uncertain if converting it back into an object is the right appro ...

javascripthtmlcssnode.jsexpress

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

javascriptjqueryhtmlformsfunction

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...

javascriptphphtmlsyntaxeof

How can I verify an element's attribute while employing Event Delegation?

Is there a method to determine if a particular element has been activated using Event Delegation, based on its attribute, class, or ID? <ul> <li><button>Make the first paragraph appear</button></li> <li><butto ...

javascripthtmljquerycssjquery-events

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

What steps do I need to take in order to successfully make a checkbox?

I am attempting to use Angularjs to set a checkbox to true. When saved, it should store an integer value (1 or 0) in my field. Below is the code snippet for the view: <input type="checkbox" ng-model="lis.SMSPromotion" id="SMSPromotion" ng-init="checke ...

htmlangularjs

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs. The main requirement is: When I click on the next slide, the current next slide should become active and a new next slide should load with ...

javascripthtmljquerycssbootstrap-4

What is the best way to determine the width of tables - in the HTML code or using a CSS class?

I recently came across some advice suggesting that a website should still be able to function properly even if the CSS files are not loaded. What approach do you think would work best in this situation? Would it be more effective to use <table width=50 ...

htmlcssclassattributes

Tips for preloading icon font in Angular server-side rendering (SSR)

Is it possible to preload icons and fonts before the HTML content is rendered? I have been using a preload strategy to try and achieve this. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

htmlangularpreload

Using Javascript to navigate links in a list using keyboard arrow keys

When links are not wrapped in other elements, I am able to change focus easily. Here is how it works: HTML <a id="first" href="#" class='move'>Link</a> <a href="#" class='move'>Link</a> <a href="#" class=&a ...

javascriptjqueryhtmlnavigationfocus

Seeking guidance on implementing toggle buttons for navigation bar items on mobile screens, enabling them to toggle for a dropdown menu. The tools at my disposal are HTML, CSS

I want to make the navigation menu responsive by adding a toggle button for the dropdown menu on mobile screens. Here is the code snippet: .nav-link { display: inline-block; position: relative; color: black; } html,body{ height: 100%; width ...

javascripthtmlcssbootstrap-4responsive-design

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Looking to enhance the visual appeal of my website, I decided to incorporate a background image within a div. To add more depth and creativity, I am now striving to overlay a semi-transparent black box on top of the image. This overlay will not only allo ...

htmlcss

When a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

javascripthtmlajaxxmldatatables

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

I'm encountering an issue with retrieving the text from LI elements because I have 10 list items and they all have the same class name. When I attempt to fetch the text using the class name or id, I only get the text of the last item. Here is my code ...

javascriptjqueryhtml

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

htmlcss

Why is Chrome ignoring the flexbox CSS in the footer section of my website?

My footer flexbox CSS is working on various browsers and devices, but for some reason, Chrome on my iMac is not responding correctly. The website is www.batistaelectric.com. It works on my iPhone Chrome browser, Safari iPhone browser, iMac Safari browser, ...

htmlcssflexbox

What is the process of invoking a Java method through AJAX on a website?

I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...

javajqueryhtmlajax