The responsiveness of Bootstrap 5 footer needs improvement

I am currently developing a website using Bootstrap 5, HTML, and CSS. I've encountered an issue where the columns in the footer don't align properly when the screen size is reduced. Surprisingly, the columns line up correctly on mobile-sized and desktop-sized screens, but not on tablet-sized and laptop-sized screens.

Here's how the tablet-sized screen appears https://i.sstatic.net/uZN0F.jpg

This is what the desktop-sized screen looks like https://i.sstatic.net/jECyN.jpg

Test.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Home | </title>

    <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d100d13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    ...

<footer a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
    ...
}

@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
    ...
}

@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
    ...
}
htmlcssresponsive-designfrontendbootstrap-5

Answer №1

The issue arises when the 'Privacy and Terms' heading wraps onto 2 lines on certain screen widths.

Here are a couple of solutions to consider:

(1) You can reduce the font size of the headings to prevent wrapping:

https://codepen.io/panchroma/pen/rNQRZQj

Below is the updated CSS code starting at line 157

@media screen and (min-width: 768px) and (max-width: 991px) {
  footer h4 {
    font-size: 1rem !important;
  }
}

Alternatively,

(2) Maintain the current font size of the headings but increase their height to match that of 2 lines:

https://codepen.io/panchroma/pen/eYQXxmW

@media screen and (min-width: 768px) and (max-width: 991px) {
  footer h4 {
    min-height: 56px;
  }
}

In both cases, I made adjustments in the CSS at line 158 to add some top padding to paragraphs in columns 1 and 4 for proper alignment of content in all 4 footer columns.

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

"Emphasizing the Html.ActionLink menu for improved user navigation and

Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...

javascriptjquerycss

Tips for aligning numbers in a monospaced ordered list

Is there a way to align the numbers in a numbered list within a table using monospace font so that they are at the same level as bullets on a bullet list? Simplest example: ol { font-family: monospace; } ul, ol { margin-top: 10px; margin-bottom: ...

htmlcss

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

javascripthtml

What are some ways to create a larger-than-life mui button size?

The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...

htmlcssreactjsbuttonmaterial-ui

Is there a way to display a button and text upon hovering over an image without using JQuery?

On my current WordPress project, I am faced with the task of creating a gallery that displays text and a button when users hover over an image. I have attempted to use a:hover but have only been able to make limited modifications. Can anyone provide guid ...

javascriptjqueryhtmlcsshover

Extracting data from a textbox in a PHP view and passing it to the controller

Is there a way to retrieve the values entered in a text box on a webpage and pass them to a PHP controller for display? VIEW <input type="text" name="Quantity" id="Quantity" value="" /> CONTROLLER function cartoutput() {//echo "hi"; $category ...

phphtml

Substitute using JQuery

Hello, I am attempting to update some html using Jquery, here is my current progress. $(".old").html($(".new").html()); It's almost working. The problem is that the .new content is being copied instead of replaced. I want to Cut/Paste instead of Co ...

jqueryhtmlcssreplace

Issue with AngularJS $http not responding to ng-click after first call

My landing controller uses a service that initiates the $http call by default when the App loads. However, I need to pass parameters based on click events, so I implemented an ajax call on ng-click. The issue is that I keep receiving the same data on ng-c ...

javascriptangularjsnode.jshtmlexpress

horizontal menu consolidation

Web Design <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Online Hangout</title> <meta http-equiv="Content-Type" content="text ...

htmlcss

How can I extract the page's output using JQuery?

Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...

javascriptjqueryhtmlcssajax

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

pythonhtmldjangobootstrap-4

Using the onreadystatechange method is the preferred way to activate a XMLHttpRequest, as I am unable to trigger it using other methods

I have a table in my HTML that contains names, and I want to implement a feature where clicking on a name will trigger an 'Alert' popup with additional details about the person. To achieve this, I am planning to use XMLHttpRequest to send the nam ...

javascripthtmlajax

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

htmlcssbootstrap-4

Even with a correct XPath and the element present, Webdriver inexplicably throws a NoSuchElementException

There are 20 Google review score elements on a page like this. https://i.sstatic.net/9ErFS.png The XPath for each element is: //ol/div[2]/div/div/div[2]/div[%s]/div/div[3]/div/a[1]/div/div/div[2]/div/span To extract the review counts using Python and W ...

pythonhtmldomxpathselenium-webdriver

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...

javascripthtmlcssfirebasegoogle-cloud-firestore

Accents marked with diacritics are not being detected + An issue occurred while

I'm currently working on putting together a Spanish dictionary by sourcing the definitions from www.rae.es. However, there are a couple of challenges I'm facing: One issue is that the search engine does not function properly with acute accent ...

phpjavascripthtmlhyperlinkhtml-parsing

What could be causing the data-* prefix to malfunction in Angular 9?

I'm facing an issue with a basic component in Angular 9. Check out the code below: Component : @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class He ...

htmlangulartypescript

Tips for incorporating line breaks into a contenteditable div using the key combination of ctrl + enter

$("#contenteditable").keydown(function(e) { var last = false; if (e.keyCode == 13) { if (e.ctrlKey) { let brNode = document.createElement('br'); let range = window.getSelection().getRangeAt(0); ...

javascripthtmljquery

The alignment of a background image in CSS is different from using margin:0 auto, especially when dealing with scrollbars

Check out the following link to view the issue: http://jsfiddle.net/7zb6P/1/ In a scrolling div, both the yellow box and the background image are centered, however their centers appear slightly different. The discrepancy seems to be because the background ...

htmlcss

I am looking to modify the ID of the select element nested within a td tag

This is the code snippet I am working with: <tr> <td class="demo"> <label>nemo#2 Gender</label> <select id="custG2" required="required"> <option>....</option> <option>M</option> ...

javascriptjqueryajaxhtml