Is it possible to have a fluid width for an icon set using the :after pseudo-element

I have a navigation menu in which I have icons positioned after the text using CSS :after:

a.pro-serv:after { 
  content: url('../imgs/pro.png'); 
  position: absolute; 
  top: 65px; 
  left: 50%; 
  margin-left: -31px; 
}

The icons are set to sit under the text using absolute positioning. However, on a responsive site, as the navigation items shrink in width, some of the icons become too wide and do not scale proportionally. I am struggling to adjust their sizes dynamically based on screen size changes. Is there a solution for ensuring that the icons react appropriately to changing sizes?

Thank you in advance for any insights.

htmlcssresponsive-design

Answer №1

Have you attempted utilizing media queries to display a scaled-down version of the icons? Achieving responsive background images can be quite challenging. Placing them within img tags might make things simpler for you.

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

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

javascriptcssangulartypescriptionic2

Image alignment on a web page

I'm currently working on developing a website that features a unique wave effect at the bottom of the 'hero' image. From my research, I've learned that this can be achieved by cropping the bottom part of the image, making modifications, ...

htmlcssbootstrap-5

Issues arise when attempting to use bootstrap in col-md-6 format on a tablet, as the

I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units ...

htmlcssbootstrap-5

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

javascripthtmljsonvue.jstemplates

Unable to view Bootstrap Icons in Gulp 4

I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...

javascriptcsssassgulpfont-awesome

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

submit content to an iframe on a separate webpage

Work has been a challenge for me lately as I try to achieve a specific task. The starting page features a textbox and a button. My goal is to post the value entered in the textbox to an iframe on a different web page called iframeholder. The catch is tha ...

htmlpostiframe

Pressing a shortcut key will direct the focus to the select tag with the help of Angular

I was trying to set up a key shortcut (shift + c) that would focus on the select tag in my form when pressed, similar to how tab works. Here is the HTML code for my form's select tag: <select id="myOptions"> <option selected> Opti ...

javascripthtmlangularjsfocus

Dynamic jQuery for changing the CSS class is the way to go

Is there a way to dynamically change the css class of <li> elements in an ASP.NET masterpage? For example, if I click on the AboutUs.aspx link, I want to change <li class="single"> to <li class="active single"> when the page loads. Any s ...

jqueryasp.netcss

What steps should I follow to make a brief .mp3 audio file play with each keystroke?

I'm in the process of developing a web application with a form, and I want to incorporate a keypress sound effect as a progressive enhancement for better user experience. The sound effect I have chosen is quite short (0.18s). However, when testing m ...

javascripthtmlhtml5-audio

Adjusting the text size within the graphdracula library

I recently implemented a cool feature in my asp.net mvc4 application by adding a treeview using the graphdracula jQuery library. Here is a snippet of the code I used: <html> <head> <script type="text/javascript" src="~/Content/Scripts ...

jqueryasp.net.netcssasp.net-mvc-4

Tips for enhancing a table with extra functionality in Angular 6

Hi there! I've created a table using Angular 6 and now I'm looking to enhance it with some extra functionality: Implement an overall table search feature Allow users to sort the table by columns Add a "Page x of n" option for pagination I woul ...

htmlcssangulartypescriptangular-ngmodel

What is the proper way to link an image in a nuxt project?

I am working on a modal in the app.html file of my Nuxt project that prompts Internet Explorer users to switch to another browser. The modal includes links to three different browsers for download. Although the modal is displaying correctly, I keep encount ...

javascripthtmlvue.jsnuxt.jsassets

Experiencing Issues with the Email Button Functionality on My Website

I am looking to create an "Email" button that will send the user-entered text to my email address. Here is the code snippet: <form method="post" action="malto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cb ...

htmlwebvs-web-site-project

Dealing with a syntax error in JavaScript (Codecademy)

I have been working my way through the JavaScript course on Codeacademy and for the most part, I've been able to figure things out on my own. However, I've hit a roadblock with my code and can't seem to get it right. Here is the code I&apos ...

javascriptjqueryhtmlsyntax-error

Enhancing the visual appeal of HTML code in "view Source" by injecting it using a System.Web.UI.WebControls.Literal

I am currently placing code within a literal in the following manner. ImageItem.Text = string.Format("<div class=\"thumb\"><img src=\"{0}\" width=\"132\" height=\"99\" /><a class=\"more\"> ...

.nethtml

The influence of 'overflow' values, aside from 'visible', on the block formatting context

Not quite like this particular question on Stack Overflow, mine doesn't involve float issues but rather troubles with applying margins to a block-level element's only child. I encountered a dilemma while attempting to add a margin to an only-chi ...

htmlcss

The Complete Definition of HTML in Technical Terms

I would like to delve deeper into the technical definition of HTML. Although I am aware that HTML stands for HyperText Markup Language, I am still unclear on the precise technical implications of these terms. Can you explain what HyperText means? What ...

html

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap