I'm trying to implement a site using AdminLTE template. After setting up the skeleton page i get a small pixel rendering issue with font-awesome icons. In my site the icons are slightly raised as you can see in the attached screenshots:
As you can see the icons are at a slightly higher position than the normal one. The user menu stays at the same position.
I've looked at the CSS properties using Chrome dev tools but can't see any difference.
Anyone has a clue of what it can be?
Thanks in advance.
Related
I'm building a website using the Showit site builder and am getting this very frustrating bug where iOS makes the letters have wider spacing between them, causing some text boxes to overlap. It's correct on all other browsers and devices, but not iOS.
Scroll to 2nd section on here for an example (You'll need to view it on iOS and another device to see the difference.)
It's happening with a range of fonts, but mostly Canela and Red Hat Display.
I have a fairly basic knowledge of HTML and CSS so am not sure even how to start fixing it - but I can add CSS code to the builder if someone can help by finding a solution?
Thanks so much!
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
On a web project I'm working on I have a fixed navbar at the top of the page and the content underneath has Font Awesome icons sprinkled around.
Initially, I was using a CDN link to FA and everything was rendering fine.
When I tried using a local version retrieved through Bower, the icons were being rendered above the navbar while all other content was being rendered properly below.
The z-index on the icons are set to auto for both CDN and local versions (Font Awesome version 4.6.0).
I have tried modifying the icon z-index values manually to no avail.
The issue appears on both Firefox and Chrome.
Has anyone experienced this problem before?
just recently came across this problem.
Apparently, font awesome icons has z-index: 4
Therefore, set .navbar to z-index: 5 or anything greatly than 4, the problem's gone.
Check that the stylesheets are being loaded in the same order - you can do this on the network tab.
Latency may be causing one stylesheet to apply out of order - especially if you are using imports.
Bootstrap version 3
Font Awesome version 3.2.1
I am having issues with bootstrap and font awesome on Chrome. When I originally load a page, the font awesome icons are displayed correctly. When I refresh the page, the icons disappear. **To clarify, the entire icon is missing, this is not the empty box issue that some others encounter.
I'm grasping at straws here, but I noticed there were differences in the order in which the files were retrieved between the original page load and the refresh.
When the page is refreshed, the font file is the last item to be retrieved, and it appears to be a cached version as well.
Finally, any icons that are located inside of a <div class="btn"> will be loaded when the mouse hovers over the div.
Any help would be much appreciated!
Initial page load
Page refresh
I guess you are on a Windows machine, right?
This is an old problem with Chrome. See this posting on CSS Tricks. The next to last post should be the answer to your question. Or in short: Use the PUA (Private Use Area) for encoding.
The Unicodes (PUA codes) for each icon are listed in the Font Awesome CSS file - see: Font Awesome uses the Unicode Private Use Area (PUA)... (around line 190).
I got the same problem in latest verion of chrome (33.0.1750.152)
Working solution for me: move styles from body to head section.