When the footer div is viewed on a mobile device, the Social Media Icons will stack vertically along with additional text

Seeking help with a bootstrap website issue here. When I switch to mobile view, the images in my footer are stacking vertically outside of the div. The code and an example image are provided below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap test</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/index.css">
        <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="JavaScript/index.js" defer></script>
    </head>

...

CSS /

* NavBar parameters*/

...

Struggling with this footer layout issue on mobile devices. Any suggestions or solutions would be greatly appreciated! Take a look at the provided image for reference. Thanks!

View current mobile display

htmlcssbootstrap-4

Answer №1

By simply adding display: flex; to the footer images division, everything fell beautifully into place.

Here is the modified code snippet:

<div class="col-md-5" id="sm" style="padding-left: 10%; padding-bottom: 1%;display: flex;">
                <a href="#"><img src="images/rsz_1rsz_insta.png"></a>&nbsp;&nbsp;&nbsp;
                <a href="#"><img src="images/rsz_twitter.png"></a>&nbsp;&nbsp;&nbsp;
                <a href="#"><img src="images/rsz_1facebook-removebg-preview.png"></a>&nbsp;&nbsp;&nbsp; 
            </div>

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 arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Defining the dimensions of a Material Dialog box in Angular: A step-by-step guide

Thank you for taking the time to read this. I'm currently trying to create a dialog box with a specific size of 90% in width, but I'm facing some challenges in achieving this. Can anyone guide me in the right direction or just provide me with th ...

cssangularangular-materialdialogmaterial-dialog

Input form and select form collide in conflict when the "Enter" key is activated

My search box includes input forms and a select form with various options. The issue arises when using the place autocomplete feature from Google Maps alongside the select form. When the enter key is pressed after entering a location in the autocomplete fi ...

javascriptjqueryhtmlformsbackbone.js

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

htmlcssangular7angular-datatables

PHP Simple HTML Dom fails to correctly parse specific links

As I dive into the world of HTML DOM Parsers and how they function, I've encountered a problem. I'm able to parse the root domain and other websites successfully, but for some reason, I can't seem to parse a specific link. Can anyone shed li ...

phphtmlcurlsimple-html-dom

Choosing the perfect gradient shade for a progress bar canvas illustration: Tips and tricks

I am trying to customize the appearance of the usage bar in my Google Chrome extension by utilizing the features of the HTML5 canvas. Currently, the bar consists of a basic DIV element: <div id="idUsgBar"></div> accompanied by this CSS stylin ...

javascripthtmlgoogle-chromecanvas

Extra brackets appear when retrieving JSON data

In my code, I am attempting to extract data from a JSON file. The JSON data does not have any brackets, just an array separated by commas. However, when I retrieve the data using $scope, an extra square bracket is added outside of my output. Here is a demo ...

javascriptjqueryhtmljsonionic-framework

Numerous div containers featuring two rows and an infinite number of columns

I am working with JSON data that includes 10 divs, and I am looking to insert a div after every pair of divs. The current structure of my HTML code is as follows: <div class="imgs"> <div class="fixed">1</div> <div class="fixed ...

jqueryhtml

Is it possible to install non-root dependencies in node_modules using NPM?

The repository @superflycss/component-navbox contains the following list of dependencies: "devDependencies": { "@superflycss/component-body": "^1.0.1", "@superflycss/component-display": "^1.0.2", "@superflycss/component-header" ...

javascriptcssnode.jsnpm

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

htmlcssinternet-explorerfirefoxcross-browser

Update the background color of the badge component in the Popover dynamically to a custom color

I'm currently working on incorporating a dynamically colored badge element into a popover that appears when a specific item in my application is clicked. The color of the badge should reflect the color property of the item. Despite my attempts with t ...

twitter-bootstrapbootstrap-4

Explore the Bootstrap 4 navbar featuring a search option strategically placed on the right side, accompanied

I'm currently working on designing a navbar that includes a Search option and Login options. My goal is to have the Search bar aligned to the right, just before the Signup link. Any assistance with this would be greatly appreciated. Thank you in adva ...

javascriptcssbootstrap-4

show an interactive table with 2 columns for easy printing

My table is generated dynamically to display the work done by employees within a specific time period. Each work item is listed as a new row with 4 columns containing information on time spent, costs, etc. The data looks like this: Worker1 mailservice | ...

htmlcssprintinghtml-table

Apply a different background color to ion-item when it is clicked

Is there a way to change the background color of an ion-item when it is clicked by a user? Any help on how to achieve this would be greatly appreciated. Here's an example code snippet: <ion-item (click)="openDetail(variant)">{{variant.Product ...

javascriptcssangulartypescriptionic-framework

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

javascriptcssreactjsdropdown

Tips for aligning an inline form in Bootstrap 5

I am looking to create an inline form with rows. Each row should include an input field that spans 5 columns, along with a button wrapped in content. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcsstwitter-bootstrapbootstrap-5

elements that do not adhere to set width constraints

I've successfully arranged elements in my HTML using flexbox to achieve a responsive design for a website. However, I've encountered an issue where the elements do not resize properly. After applying a class of flex to the home-promos div and re ...

htmlcssflexbox

What is the best way to incorporate the :after pseudo-element in JavaScript code

HTML: This is my current code snippet <div class="one"> Apple </div> I am looking to dynamically add the word "juice" using JavaScript with the .style property. Is there an equivalent of :: after in CSS, where I can set the content in JavaS ...

javascripthtml

What could be causing my jQuery script to malfunction?

After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point ...

javascriptjqueryhtmlcss

Script for automated functions

I have implemented 4 functions to handle button clicks and div transitions. The goal is to hide certain divs and show one specific div when a button is clicked. Additionally, the background of the button should change upon hovering over it. Now, I am look ...

jqueryhtmlcss