Positioning social media logos at the center

Looking for advice on how to center my social media icons horizontally and make them collapse vertically when the screen size changes. I currently have no CSS applied to the icons below. Any suggestions or tips on what CSS properties I can use to achieve this? Thank you!

<footer class="footer">
        <div class="page-footer">
            <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
            <i class="fa fa-instagram" style="font-size:50px"></i>
            <i class="material-icons" style="font-size: 50px;">facebook</i>
            <i class="material-icons "style="font-size:50px">map</i>
            <i class="material-icons" style="font-size:50px">phone</i>
        
            
            

              </div>
    </footer> 



.footer {
padding-top: 60px;
background-color: #000;
color:#eae2d8;}

.page-footer{
width: 100%;
padding: 50px 0px 70px 0px;
background-color: $basic-dark-color;}
htmlcssresponsive-designiconsfrontend

Answer №1

Gather all the instances of id elements.

Enclose them in a div with specific styling.

Next, include this style attribute within the div tag: 

style="display:flex;justify-content:center;"

This setup will adjust as you resize the window.

Answer №2

Here's a suggestion for your CSS styling: I've created two CSS elements named "container" and "i"

container {
        display: flex;
        display: -webkit-flex;

        flex-direction: row;
        -webkit-flex-direction: row;

        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;

        justify-content: center;
        -webkit-justify-content: center;
    margin: 0;
    padding: 0;
}

i {

    border: 3px solid yellow;
    margin: 10px;
    padding: 5px;
    
}

.footer {

padding-top: 60px;
 
background-color: #000;
color:#eae2d8;
}

.page-footer{
width: 100%;
padding: 50px 0px 70px 0px;
background-color: $basic-dark-color;



}
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<footer class="footer">
        <div class="page-footer">
            <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
            
          
          <container>  
            <i class="fa fa-instagram" style="font-size:50px"></i>
            <i class="material-icons" style="font-size: 50px;">facebook</i>
            <i class="material-icons "style="font-size:50px">map</i>
            <i class="material-icons" style="font-size:50px">phone</i>
     </container>
        
            
            

              </div>
    </footer> 


</body>
</html>

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

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

Struggling with sending complex JSON data through PHP POST requests

I'm attempting to transmit form data as a JSON object to a demo application on Force.com. The process involves using jQuery to extract the form data and POST it to a PHP file on my server, which then forwards it to the aforementioned demo app. Unfortu ...

phpjqueryhtmljson

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

htmlcsstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Can Bootstrap be utilized by incorporating only specific parts of it?

Is there a way to easily separate specific parts of MyCSS.css and Bootstrap4.css? I'm having issues with Bootstrap breaking my CSS, but I still want to use certain components from Bootstrap4. While I know how to extract portions of Bootstrap4 CSS co ...

htmlcsstwitter-bootstrapbootstrap-4

Adjusting the line height of an inline-block div causes surrounding inline-block siblings to shift downward

As I venture into exploring the line-height property, I came across information on MDN which stated: For non-replaced inline elements, it determines the height used in calculating the line box height. However, in this scenario, when I set the line-heigh ...

htmlcssline-height

Updating the functionality of Bootstrap 4 accordions

Utilizing HTML templates based on Bootstrap 4.3.1, I am delivering educational content to my students. In the current setup, all accordion panels are closed when the page loads, and each panel can be opened independently of others. To see a live example, ...

javascripthtmlcssbootstrap-4bootstrap-accordion

Guide to creating a fixed accordion header in Bootstrap 4

Looking for a way to make the header of a BS4 accordion sticky when it is opened, so that it stays at the top of the screen even when users scroll down Current approach is not achieving the desired result: #accordion .card-header BUTTON:not(.collapsed) { ...

csstwitter-bootstrapbootstrap-4sticky

Having trouble with JQuery's append method on the <head> tag?

I am having an issue with this particular code block. It seems to be unable to insert the meta tag into the head section. Any suggestions on how to resolve this problem? <html> <head> <title>hello world</title> </head> < ...

javascriptjqueryhtmlmeta

Full height background image

One issue I'm encountering is that the background image randomly disappears when scrolling down, revealing the background color instead. To better illustrate, here's a gif demonstrating the problem: https://gyazo.com/d2d742a1ff1225babe04faa0a597a ...

htmlcssimagebackgroundheight

Selenium Assistance: I'm encountering a scenario where on a webpage, two elements share the same Xpath, making it difficult to differentiate them based on even

At index [1], both elements are identified, but at index [2], nothing is identified. The key difference between the two is that one has display:none, and the other has display:block. However, their involvement in determining these fields is minimal due to ...

javascripthtmlseleniumxpath

Turn your HTML5 web app into a convenient icon or application on both iPhone and Android devices

Apologies if this question seems basic, I've spent a good amount of time searching for an answer without success. I'm currently working on an html5 app that heavily depends on sqlite for local storage. I want the app to be displayed as an icon ...

iphoneandroidsqlitehtmlweb-applications

Steps to replace one <ng-template>component</ng-template> with another within the same page area

I am currently utilizing bootstrap@3 classes to divide the page vertically into a col-md-5 and a col-md-7 (adding up to 12). My objective is: upon clicking on the "new recipe" button, to have it replace in the same area on the right. Unfortunately, the c ...

htmlangularbootstrap-5

Largest possible <main> container with footer positioned at the bottom

I have organized my webpage into three sections: the <header>, the <main>, and the <footer>. The <header> is fixed at the top with a height of 109px, including a 6px border, which results in the <main> having a margin of 109p ...

htmlcssweb

Creating a dropdown menu that seamlessly populates elements without any empty spaces

My team at the company is using a menu created by another developer. I recently added a dropdown selection to the first item on the menu, but I've run into an issue where the dropdown box does not fully fill the item, and I can't seem to fix it. ...

htmlcsswebbulma

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

CSV output is all jumbled after web scraping

This script is designed to iterate through multiple results pages and then traverse the results table on each page to extract all the data from it, along with additional information stored outside the table. However, the resulting CSV file is not organize ...

pythonhtmlpython-3.xcsvweb-scraping

I am currently facing an issue in choosing the appropriate year using Python, Selenium, and VSCode

Having trouble selecting the year in my code. Please run the code to see what happens at the end. I've attempted various methods. Unable to find a solution. # -*- coding: utf-8 -*- from time import time import time from selenium import webdr ...

pythonhtmlcssseleniumvisual-studio-code

Retrieve all data based on the column name from an HTML table

I currently have an HTML table that looks like this:- +------+----------+----------+----------+ | name | subject1 | subject2 | subject3 | +------+----------+----------+----------+ | xxx | pass | fail | pass | | yyy | pass | pass | pa ...

javascriptjqueryhtml

Generate a dynamic image using CSS and either a div or a span tag

My image is intricately carved into several slices. You can view it here <!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

csshtml

Observing the HTMLInputElement Object in Action with JavaScript

After utilizing JavaScript to extract the value from the SPAN element, placing it into a hidden form field, and submitting the data, I am puzzled by the unexpected result I am receiving. Can you help me understand why this is happening? <form onsubmit= ...

javascriptjqueryhtml