Creating Responsive Social Icons using HTML and CSS

Currently working on my portfolio website, but encountered an error. Can someone assist me in making my social icons responsive?

I need the icons to be responsive and aligned horizontally for the mobile version. Here is a visual of the issue with the desktop version: Desktop Version Image

Please help me rectify this problem by guiding me on how to make the social icons responsive. You can view the current state of the icons here: Non-Responsive Social Icons

Here's the code snippet from index.html:


    <!-- home -->
    <section class="home bd-grid" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello, Myself</div>
                <div class="text-2">Piyush Shrivastava</div>
                <div class="text-3">And I'm a <span class="typing"></span></div>
                <a href="#">Download CV</a>
            </div>
        </div>
        <div class="social">
            <ul>
                <li>
                    <div class="circle">
                        <i class="fa fa-facebook-f" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-youtube" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
    </section>

And here's the relevant CSS code from styles.css:

.home{
    display: flex;
    flex-wrap: wrap;
    background: url("/img/banner.jpg") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
  width: 100%;
  display: flex;
}
...
@media (max-width: 947px) {
    .home .home-content .text-2 {
        font-size: 60px;
    }
}
htmlcssresponsiveness

Answer №1

Consider approaching your issue from a different perspective.

Dealing with layout shifts can be easier when following a 'mobile first' approach. Start by styling the mobile version and then use media queries to adjust the desktop version, rather than trying to fit everything into mobile after styling for desktop.

I've created a quick demo that may help you understand the methods you could employ. Please note that this demo is not a direct fix for your code but serves as an illustration of useful techniques.

The method utilizes flex properties entirely. The social elements are no longer absolutely positioned, and unnecessary div wrappers have been removed.

I've also added border colors and padding to clearly demonstrate how the box model reacts when resizing the browser.

To view the demo, click on 'run code snippet,' then select the 'full page' option to see both the mobile and desktop layouts.

Here's the link to the JSFiddle where I created the demo in case you find it helpful: CLICK TO VIEW FIDDLE

.contentWrapper {
  border: 1px solid pink;
  padding: 10px;
}

.mainContent {
  border: 1px solid blue;
  padding: 10px;
}

.social {
  border: 1px solid green;
  padding: 10px;
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.circle {
  background-color: red;
  border: 2px solid white;
  border-radius: 200px;
  height: 35px;
  width: 35px;
}

@media screen and (min-width: 948px) {
  .myWrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
  }

  .contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .mainContent {
    width: calc(100% - 55px);
    max-width: 1000px;
    margin: 0 auto;
  }

  .social {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .social ul {
    display: flex;
    flex: 0 0 55px;
    flex-direction: column;
  }
}
<section class="myWrapper">
  <div class="contentWrapper">
    <div class="mainContent">
      <div class="text-1">Hello, Myself</div>
      <div class="text-2">Piyush Shrivastava</div>
      <div class="text-3">And I'm a <span class="typing"></span></div>
      <a href="#">Download CV</a>
    </div>
  </div>
  <ul class="social">
    <li>
      <div class="circle">
        <i class="fa fa-facebook-f" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-instagram" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-twitter" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-youtube" aria-hidden="true"></i>
      </div>
    </li>
  </ul>
</section>

Answer №2

To align icons in a row: To achieve this, we can utilize the @media feature.

APPROACH

Utilize flexbox to arrange your icons horizontally and grid for a cohesive layout on larger screens.

You can also set a width and add margin auto for centering, though using justify-content center is a better alternative not mentioned here.

<!-- home -->
<section class="home bd-grid" id="home">
    <div class="max-width">
        <div class="home-content">
            <div class="text-1">Hello, Myself</div>
            <div class="text-2">Piyush Shrivastava</div>
            <div class="text-3">And I'm a <span class="typing"></span></div>
            <a href="#">Download CV</a>
        </div>
    </div>
    <div class="social">
        <ul class="icons"> // give class icons to make it a flexbox 
            <li>
                <div class="circle">
                    <i class="fa fa-facebook-f" aria-hidden="true"></i>
                </div>
            </li>
            <li>
                <div class="circle">
                    <i class="fa fa-instagram" aria-hidden="true"></i>
                </div>
            </li>
            <li>
                <div class="circle">
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                </div>
            </li>
            <li>
                <div class="circle">
                    <i class="fa fa-youtube" aria-hidden="true"></i>
                </div>
            </li>
        </ul>
    </div>
</section>

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

Repeating linear gradients in the background

After creating a linear-gradient background animation in CSS for my to-do list, I encountered an issue. As I added more items to the list, the website became scrollable and the background started repeating, which made it look unappealing. I attempted to s ...

cssbackgroundrepeating-linear-gradient

Choose all checkboxes across the entire webpage

Given the code below: <input type="checkbox" name="categories[9507]"> Is there a way to write a JavaScript command that can automatically select all checkboxes with similar naming structures on the entire page? The only difference in the names is t ...

javascripthtml

Ensure that the remaining space on the page is filled by utilizing 2 divs

I am currently in the process of developing a website that needs to be responsive on all pages. The layout consists of 5 divs positioned horizontally. The three middle divs have fixed sizes - 200px, 400px, and 200px respectively. However, I am facing a cha ...

csshtmlscreenfill

Getting around popup blockers on safari

Here is the HTML code I am working with: <a href = "#" class="fb">Facebook</a> I am using an onclick event handler that triggers window.open when the link above is clicked. This works fine in Chrome, but it does not work in Safari. How can I ...

javascriptjqueryhtml

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

Concern with Isotope's masonry feature

I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...

javascriptjqueryhtmlcssjquery-isotope

having difficulty grasping the variable's scope within this code

Here we have a code snippet where the variable vid is initialized inside a function. The question arises on how this variable can be used outside the function, specifically in the context of vid.play(). How does the program know that vid was created usin ...

javascripthtml

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

javascriptjqueryhtmlcss

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

switch out asterisk on innerhtml using javascript

Is there a way to replace the asterisks with a blank ("") in the innerHTML using JavaScript? I've attempted this method: document.getElementById("lab").innerHTML = document.getElementById("lab").innerHTML.replace(/&#42;/g, ''); I also ...

javascripthtmldom

Submit HTML checkboxes that have not been selected

I have a set of checkboxes that come pre-checked by default. I anticipate that my users may uncheck some, but will probably leave most of them checked. Is there a way to configure the form so that it submits the unchecked checkboxes instead of the checked ...

htmlformspostcheckbox

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Save the ID from the listview in the browser's localStorage

I have a listview that is generated by a loop: for(var i = 0; i < data.length; i++) { var garage = data[i]; $("#content-p").append( "<ul data-role=\"listview\">" + "<li><a href=\"#\" i ...

javascriptjqueryhtmljquery-mobile

Retrieve various identification numbers from one division and transfer them to another using AJAX

In my project, I have implemented a functionality where clicking on one DIV should trigger the opening of the next DIV in sequence. The first DIV triggers the second DIV to open, the second DIV opens the third DIV, and so on. This is achieved using collaps ...

phphtmlajax

Refresh React component after form submissionIn this guide, learn how to automatically refresh a

Every time I submit the page, it keeps loading indefinitely and I have to manually refresh the page to see the input in my table. The table.js and submit.js are located in two different components. Is there a way to automatically refresh the page after sub ...

htmlreactjs

Implementing the removal of selected rows in MVC using JQuery

How can I remove a checked row from a table in asp.net MVC using jQuery? Below is the code I have tried, but it's not working. Any suggestions would be greatly appreciated. function saveOrder(data) { return $.ajax({ contentType: ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

If a user touches outside of the scroll component on mobile, the scroll in the popup freezes

I have a webpage that includes two scrollable lists: one in the main body and another in a popup window. To prevent scrolling of the main body when the user scrolls inside the popup, I am using a standard solution recommended in this Stack Overflow post ab ...

javascripthtmlcssmobilescroll

Selenium failing to input text into field

My goal is to extract data from the following URL: There are three key components to this extraction: Choosing the correct game type under "Valitse peli" I want to select "Eurojackpot" for this. Setting the date range using variables. Currently, I hav ...

pythoncssseleniumweb-scraping

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

Notification continuously appears when clicking outside of Chrome

I have implemented the use of onblur on a text box to display an alert. However, I encountered an issue where if I click outside my Chrome browser after entering text in the text box and then click on the Chrome browser button in the task bar, the alert ap ...

javascriptjqueryhtmlgoogle-chromeonblur