As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered an issue where the clicked icon disappears at a certain point when the page is resized.

I suspect this problem is related to the stacking of icons, but I am unsure of the underlying cause. Can someone provide guidance on how to resolve this issue?

For reference, here is a screenshot of the screen under normal resolution: https://i.sstatic.net/OAPOw.png

And here is how it looks when the page is shrunk:https://i.sstatic.net/N97wm.png

Below is the code snippet:

<div class="row pb-4">
  <div class="col-md-2 offset-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if="this.headClass !== 'bc-header-red'"></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #D1504F;" v-if="this.headClass === 'bc-header-red'"></i>
    <i class="far fa-circle fa-stack-2x" v-if="this.headClass === 'bc-header-red'"></i>
  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if="this.headClass !== 'bc-header-blue'"></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if="this.headClass === 'bc-header-blue'"></i>
    <i class="far fa-circle fa-stack-2x" v-if="this.headClass === 'bc-header-blue'"></i>

  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if="this.headClass !== 'bc-header-green'"></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if="this.headClass === 'bc-header-green'"></i>
    <i class="far fa-circle fa-stack-2x" v-if="this.headClass === 'bc-header-green'"></i>

  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if="this.headClass !== 'bc-header-yellow'"></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if="this.headClass === 'bc-header-yellow'"></i>
    <i class="far fa-circle fa-stack-2x" v-if="this.headClass === 'bc-header-yellow'"></i>

  </div>
</div>

htmlcssvue.jsbootstrap-4font-awesome

Answer №1

Unable to reproduce the issue based on the details provided... however, if you suspect that the vertical stack is causing the problem, you could try switching it to a horizontal layout like in the code snippet below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row pb-4 justify-content">
  <div class="col-md-2 col-2 offset-md-2 offset-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if=" this.headClass !== 'bc-header-red' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #D1504F;" v-if=" this.headClass === 'bc-header-red' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-red' "></i>
  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass !== 'bc-header-blue' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass === 'bc-header-blue' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-blue' "></i>
  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass !== 'bc-header-green' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass === 'bc-header-green' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-green' "></i>
  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass !== 'bc-header-yellow' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass === 'bc-header-yellow' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-yellow' "></i>
  </div>
</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

Why does my CSS attribute selector fail to update when the property's value changes?

Context: I'm working on a React-based web app that utilizes traditional CSS loaded through an import statement. In order to create a slider functionality, I have applied a CSS selector on the tab index attribute. Challenge: The issue I am facing is t ...

cssreactjs

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

htmljsonrestsymfonytwig

Explaining how to iterate through objects (one by one) in the This.questionnaire.Profile at every click using JavaScript (answer not found in forums)

Creating a series of questions, each part being stored in This.question = {p1: {...}, p2: {...}, p3: {...}, p4: {...}, p5: {...} etc. (and many more). I want to be able to switch from one article to the next every time I click a button... click => next ...

javascripthtml

Enhancing the appearance of an Angular.js application

On the same page, there are two buttons - one for buying and one for selling. It appears that both buttons share the same HTML instance. This creates a problem when trying to style them individually using classes, ids, or other HTML-targeted selectors, as ...

cssangularjs

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

cssinternet-explorer-7

When a JavaScript click event is triggered, IE8 can reset certain margins to zero

I am experiencing an issue with 3 divs containing content that becomes visible when clicking on 3 buttons. You can see a demonstration of the problem here: At times, when I click one of the buttons, the layout seems to be disrupted as shown here: It appe ...

javascriptjqueryhtmlcss

Is there a way to duplicate a specific quantity of icons with Polymer?

I am facing a bit of a challenge with a seemingly simple task. My goal is to showcase the number of credits completed by each student in my list using star icons. For instance, John ★, Sarah ★★, Ken ★, and Jared ★★★★. The JSON data contai ...

htmlcsssvgpolymerweb-component

display alternative text before an image is loaded on the screen

Is there a way to display text instead of an image before the image loads? I have a website with an image as the title, causing the page to load fully before the title image is loaded later. Is there a solution for this issue? ...

javascripthtml

When accessing xmlHttp responseText, it displays the contents of the PHP file instead of outputting the results of executing

I have two programs, test.html and test.php test.html: <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js" ...

phphtml

Create a CSS path that connects two points by drawing a line

My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...

htmlcss

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Make desktop view the default even when accessing from a mobile device

I have searched through all other similar questions but have not been able to find a solution. I am new to programming and am currently learning CSS. I have created a webpage with the following code: <html> <style> body { p.Welcome { ...

htmlcss

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

htmlcssfixedfluid

Handling Google-Strategy authentication in a Vue application with passportjs

I am seeking advice on how to implement the Google strategy of passportjs in my Vue App with Node running in the backend. The Vue app is hosted on localhost:8080, and Node is on localhost:5000 I have successfully set up a Local strategy using: Sending A ...

node.jsvue.jsoauth-2.0passport.jspassport-google-oauth

I'll show you how to implement custom fonts in TailwindCSS and NuxtJS!

Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module. Despite applying the correct font-family through CSS, it seems that m ...

cssvue.jsfontstailwind-cssnuxtjs

Issue with rendering in sandbox environment versus localhost

Here's a dilemma I'm facing - I have some HTML code on my localhost that looks like this: <div> <p>Go to: <a href="www.foobar.com">here</a></p> </div> On localhost, the output is "Go to: here" with 'he ...

javascripthtmlcssdeployment

Is there a way to retrieve the immediate children of all elements using CSS selectors in Selenium?

Although I attempted to utilize the ">" syntax, selenium does not seem to accept it. I am aware that Xpath can be used to obtain what I need, however our project exclusively utilizes CSS selectors. My goal is to create a list containing only the immedi ...

javascriptcssseleniumwebdriverselenium-webdriver

Disable the display of meridian in the UI Bootstrap datetime picker

Currently, I am utilizing the ui-bootstrap-datetime-picker with angularJS. I am wondering if it is feasible to directly set the show-meridian options of the time-picker inside the timepickerOptions. ... <input type="text" class="form-control" ...

htmlangularjstwitter-bootstrap-3bootstrap-datetimepicker

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss