Develop Reference

logo not changing in mobile devies in wordpress site

I have a problem, that when i view my site from mobile devices, it shows the default logo of the theme, I have updated the mobile logo in theme options, but also the logo is not changing..
So is there any way to find the default logo in theme coding and then replace it with my custom logo in mobile devices...or any other way!
I tried to hide the deafult logo and use custom logo for mobile devices by this code:-
#media (max-width: 480px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
overflow: auto;
}
}
}
#media (min-width: 480px) and (max-width: 768px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
display: block;
}
}
The above code does not work..
In desktop devices the logo is working fine, only problem with in android devices..

Wordpress does create a lot of problems.
I would suggest clearing cache for a proper update of the website. If you are using wordpress and any page builders, you can create the header in your Elementor Theme Builder and in there you can change from the Responsive tab anything you want to show in the Mobile and not in the Desktop.

Try This:
#media (max-width: 480px) {
.site-logo {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
background-size: cover;
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}
.site-logo img
{
display:none;
}
}

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;}
}

TargetDpi alternative for android webview

I have been searching for two days now for a solution and nothing has really worked for me. I was wondering how I would go about changing the size of text in a webview for Android in relation to screen resolution. Since targetdpi from viewport no longer works, how can i solve this?

I don't have an Android device to test this on, but you should be able to do this with CSS media queries, e.g. within your CSS file.
jsFiddle Demo
p {
font-size: 14px;
color: #c00;
}
#media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
p {
font-size: 16px;
color: #0c0;
}
}
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
p {
font-size: 20px;
color: #00c;
}
}

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.

tabs icon deteriorated while scrolling in android

I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>

Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..

I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.