Design a dynamic card with an eye-catching Font Awesome icon that adapts well to

As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:https://i.sstatic.net/yK7G8.png

The primary objective that I aim to achieve with these cards is ensuring they automatically resize by concealing the icon when the window size is altered, just like this:https://i.sstatic.net/qFiH0.png

In an attempt to mimic the CSS code from the original website and adapt it for my usage, I have encountered a stumbling block which rendered the setup as shown here:https://i.sstatic.net/4hhXV.png

While I successfully managed to hide the icon when the container shrinks too much, aligning the icon with the text remains an unresolved mystery to me. To illustrate, you can view the example on jsfiddle.

body {
  font-family: 'Roboto', sans-serif;
  background-color: #44484c;
}

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}
... (remaining CSS code)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link href="" rel="shortcut icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
... (remaining HTML/JS code)

htmlcssbootstrap-4font-awesome

Answer №1

I have not modified your css, however, please review the Bootstrap classes utilized, such as "d-flex".

body {
  font-family: 'Roboto', sans-serif;
  background-color: #44484c;
}

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box>.inner {
  padding: 10px;
}

.small-box>.small-box-footer {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.8);
  display: block;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 10;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js" integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw==" crossorigin="anonymous"></script>

Answer №2

It took some time, but I finally found the solution. Here is the updated CSS code, highlighting the important changes with comments. The HTML remains unchanged.

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box > .inner {
  padding: 10px;
}

<small-box h4 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  padding-top: 0;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 1.6rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 1.6rem;
  }
}
@media (min-width: 1200px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 2.2rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 2.2rem;
  }
}
.small-box p {
  font-size: 1rem;
}
.small-box p > small {
  color: #f8f9fa;
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
}
.small-box h4,
.small-box p {
  z-index: 5;
    color: #e3e3e3;
}
.small-box .icon {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}
.small-box .icon > i {
  font-size: 90px;
  position: absolute; /*Major change here*/
  right: 15px;
  top: 15px;
  transition: all 0.3s linear;
}

.small-box .icon > i.fa,
.small-box .icon > i.fab,
.small-box .icon > i.far,
.small-box .icon > i.fas,
.small-box .icon > i.glyphicon,
.small-box .icon > i.ion {
  line-height: 1; /*Key change here*/
  font-size: 70px;
  top: 20px;
}
.small-box:hover {
  text-decoration: none;
}
.small-box:hover .icon > i {
  font-size: 95px;
}
.small-box:hover .icon > i.fa,
.small-box:hover .icon > i.fab,
.small-box:hover .icon > i.far,
.small-box:hover .icon > i.fas,
.small-box:hover .icon > i.glyphicon,
.small-box:hover .icon > i.ion {
  font-size: 75px;
}

*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}

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

Sometimes the Navbar options fail to show up consistently on the Navbar bar

I recently launched my website at campusconnect.cc Unfortunately, I've noticed that when resizing the window, the navbar options are shifting up and down. Can anyone help me identify the issue and provide guidance on how to resolve it? ...

javascripthtmlcsstwitter-bootstrap

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

JQuery is failing to locate elements that have dynamic data titles assigned to them

I've been attempting to locate an element using a jQuery regex comparison in the data title. My situation involves having divs with the class .textbox, each containing a dynamically generated data title. To target specific boxes with that particular d ...

jqueryhtmlfindarabic

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Can anyone tell me how to change the background color of the navbar when the navbar-collapse is displayed? I want one background color when the navbar-collapse is shown and a different color when it's collapsed. Is there a way to achieve this using C ...

htmlcsstwitter-bootstrapresponsive-designnavbar

Email sending through PHP AJAX can be done without refreshing the page. The email action is handled in email.php and incorporated into

I am having trouble sending this with AJAX. The error message I keep getting is: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more assistance, please visit @ jquer ...

jqueryhtmlajax

Setting a minimum height for bars on a graph can be achieved by adjusting the

I need assistance with my graph display. Currently, the graphs are not showing when the value is less than a certain point. I would like to set a minimum height so that they can be displayed regardless of the value. My graphs are being generated using cha ...

htmlangularjschart.js

Embarking on the journey of creating mobile web applications - where should you begin?

How can I begin learning to create mobile web apps? I have a keen interest in the design aspects, particularly the effects and animations that give them a native appearance. I suspect there are differences in CSS, HTML, and possibly JavaScript compared to ...

htmlcssmobile

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

Attempting to align DIV horizontally in the center

I am currently attempting to horizontally center the div with the id "lastrow". <div class="container"> <div class="row" style="text-align:center"> <div class="col-md-12">Name: <input type="text" id="name"><span class="v ...

htmlcssbootstrap-4

Android Chrome users experiencing sidebar disappearance after first toggle

Over the past few days, I've dedicated my time to developing a new project. I've been focusing on creating the HTML, CSS, and Java layout to ensure everything works seamlessly. After completing most of the work, the design looks great on desktop ...

javascriptandroidhtmlcssgoogle-chrome

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

javascripthtmldomrangy

unable to access various attributes in an angular directive

I have a particular HTML setup that effectively outlines each attribute's value through a distinct "attachment" directive. These values are located in the attrs list of said directive, which is within a modal file upload form. <p>For Testing Pu ...

javascripthtmlangularjs

Is it feasible to customize the appearance of output text to resemble that of a password input field in Rich Faces?

Within our dataTable, we have a collection of attributes. Included in these are outputtext fields that contain passwords. Typically, password fields display as a series of black bullets if they are input fields (inputSecret). Currently, the outputText fi ...

cssrichfaces

Using a percentage in CSS translate can result in an image appearing blurry

I am facing a frustrating issue. Whenever I align an image using percentage-based transform translate, it results in a slight blur. This problem is specifically related to percentage alignment. Here is the CSS snippet: img { display: block; height: ...

htmlcsssass

When the navbar is expanded, a right-aligned image is visible; however, it becomes invisible when the

My website has a navigation bar with two logos - one in the left corner (the coat of arms) and one in the right corner (the scout lily), along with text links in between. The coat of arms uses the "navbar-brand" class. To see how it looks, click here: htt ...

htmlcsstwitter-bootstrapbootstrap-5

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Having trouble creating a scatterplot with zoom functionality where only the axis is getting zoomed, not the data itself. Can anyone provide some assistance or insight on what might be wrong? If you're interested in checking out the project, here&apo ...

javascripthtmlcsscsvd3.js

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular

Issue with displaying Bootstrap modal on top of another modal

Upon clicking the "Click me here" button, a modal pops up and displays a toast message expressing gratitude. The thank you modal should remain open on top of the save modal even after clicking save. However, upon saving, an error message appears: Cannot r ...

javascripthtmljquerybootstrap-5

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

javascripthtmlcss