Develop Reference

Vertically center in div differs on mobile vs desktop?

I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?

add some line-height with the same value as the font-size and see if it fixe anything.

Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.

Responsive Sidebar Using Divi Theme in WordPress

I am trying to hide the sidebar for mobile devices in my WordPress site with the Divi theme. I have tried to use media queries to do this but it hasn't worked.
My media query:
#media (max-width:480px) {
.menu-decoglobofx-container {
display:none;
}
}
I have also tried the plugin Hide Widgets and the sidebar still displays when I test the page on my mobile device try it yourself and see. Does anyone know how to get this to work properly?

Change this in css:
#media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
width: 100% !important;
margin: 0 0 30px 0;
}
with:
#media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
width: 100% !important;
margin: 0 0 30px 0;
display:none;
}

This should do good .. just use it with proper page_id
#media all and (max-width: 479px) {
.et_pb_sidebar_0 {
display:none !important;}
}

Mobile Device Specific CSS not working

I am trying to add following mobile specific header but it's not taking effect
#header{
width:100%;
padding:25px 0 20px 0;
border-bottom:1px solid #ddd;
position: fixed !important;
overflow: visible;
top: 0;
left: 0;
margin:0;
z-index: 99;
}
/* Diable border bottom on Mobile Devices */
#media only screen and (max-device-width: 480px) {
#header {
border-bottom:none;
}
}
+++ ADDED +++
I am trying to remove a line displaying underneath Home Services Portfolio on mobile devices (screenshot: http://imgur.com/Q4pTNMG), which works well on computer screens. The website is: modcansolutions.ca

The line isn't just being caused by the border-bottom attribute, but also the boxshadow class which is giving a box-shadow, looking much like a border.
Simply assign box-shadow: none along with border-bottom: none into your css code and it this should fix it.
#media only screen and (max-width: 480px) {
#header {
border-bottom: none;
box-shadow: none;
}
}

Edit: try to remove -device:
/* Diable border bottom on Mobile Devices */
#media only screen and (max-width: 480px) {
#header {
border-bottom:1px solid #ddd;
}
}
Edit #2:
You're actually not assigning anything new. Your styling is the same as the original. border-bottom:1px solid #ddd; is also in the original CSS.

border radius ugly rendering on Android 4.0.3

I'm developing a simple app with Cordova/PhoneGap and using FontAwesome (and border-radius) to display some social media icons. I made the build via cordova android build on the CLI.
The social media icons look neat and crispy on an Android 4.4.2.
But on an Android 4.0.3 tablet, as well as on my colleague Android 2.3.6 smartphone, it looks bad, like in this screenshot (from the tablet).
The border radius is awfully rendered, but the FontAwesome icons also look bad.
Why? Should I avoid using FontAwesome and/or border-radius in Cordova/PhoneGap applications for older Android devices? How could I serve better images on these devices?
What I'm doing right now with other images is using media queries:
#media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5){
#logo-home { width: 32px; height: 32px; background: url('../img/logo-home64x64.png'); background-size: 32px 32px; }
}
You can notice I'm actually loading a 64x64px image and setting it's dimensions to 32x32px. Is that a good practice?
Thank you
UPDATE
Here's a comparison between two PNG screenshots (the one from the link above is a JPEG that might be a bit compressed) from my Android 4.0.3 device (Galaxy Tab GT-P3100):
image 1 - these are FontAwesome icons and border-radius
image 2 - these are PNG images
The PNG icons are a bit smaller and the icons aren't exactly the same, but you can see a drastic difference between them.
Why the border-radius rendering quality is so poor? Regarding the icons, it's actually only the YouTube FontAwesome icon that looks ugly.
CSS for the FontAwesome icons with border-radius:
.social { margin: 0 auto; }
.social .item { margin: 3px; text-align: center; font-size: 24px; cursor: pointer; display: inline-block; width: 44px; height: 44px; background-color: #68a225; color: #fff; border: solid 1px #fff; border-radius: 22px; }
.social .item:hover { background-color: #fff; color: #68a225; border: solid 1px #68a225; margin-top: 0;}
.social .item i { margin-top: 12px; }

You can use Font Awesome's method called "Stacked Icons":
http://fortawesome.github.io/Font-Awesome/examples/ - scroll down to Stacked Icons
Here is a fiddle:
http://jsfiddle.net/0n4ou4y3/
<style type="text/css">
.fa-stack .fa-circle {
color: #68a225;
}
</style>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>

Padding On Tablet Device

I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.

It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.