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;
}
}
Related
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;}
}
I build a html website showing on my mobile device, while there's no problem showing image background on my Android device Galaxy S4 like this(The profile is showing!) , on the other hand, the profile background is not showing correctly like this . I had adjust the background-size so on, but all is vain. So this is my CSS code below:
#media only screen and (max-device-width: 640px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 200px;
height: 300px
}
}
#media only screen and (max-device-width: 1080px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 365px;
height: 100%
}
}
Thanks a lot buddies!
I do not have access to an iPhone, but I was able to reproduce your bug in Safari 7 on Mac OS X, using the iPhone user agent. The css from the media query was not being applied to the element. Changing max-device-width to max-width fixed the problem.
Also regarding your media queries: The max-device-width: 1080px query overrides themax-device-width: 640px query, since it comes later in the stylesheet. If you add a min-width attribute to the second media query, it will allow both queries to function:
#media only screen and (min-width: 641px) and (max-width: 1080px)
I’m working on making stylized responsive classes for buttons. The text within the button should be the same size as the rest of the text on the page, and it works fine when resized on desktop, but when the pages are viewed on tablet/mobile, the size of the text in the button is much smaller than the normal text (its almost as though the em unit has changed sizes). This has happened in all tested mobile browsers—safari, chrome, and default android browser—and no matter the HTML element the class is being applied to (button, div, p).
I have another stylized class for a side menu that is experiencing the same text-shrinking effect (different class being applied to an ul). Interestingly, the shrunken text of the menu is the same size of the shrunken buttons’ text, so whatever text size transformation is happening to one is happening to another.
Any ideas on how/why this may be? Could it be related to the ‘auto-zoom’ of the mobile browser or something? I’m fresh out of ideas, and would love to hear any thoughts on the matter
.blueButton, .greenButton{
display: inline-block;
padding: .5em .5em .5em .5em;
text-align: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px #636363;
border-radius: .3em;
box-shadow: .25em .25em .4em 0px #636363;
}
.blueButton a:link, .greenButton a:link, .blueButton a:visited, .greenButton a:visited{
text-decoration: none;
color: white;
}
.blueButton:hover, .greenButton:hover{box-shadow: .25em .25em .4em 0px black;}
.blueButton:hover{ background: #0b3a74;}
.greenButton:hover{ background: #9ec83d;}
.blueButton{ /*gradients for different browsers- 1)Safari 2)Opera 3)Firefox 4)Standard*/
background: -webkit-linear-gradient(left top, #3c78cc , #0b3a74);
background: -o-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: -moz-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: linear-gradient(to bottom right, #3c78cc , #0b3a74);
}
.greenButton{
background: -webkit-linear-gradient(left top, #caf170, #9ec83d);
background: -o-linear-gradient(bottom right, #caf170, #9ec83d);
background: -moz-linear-gradient(bottom right, #caf170, #9ec83d);
background: linear-gradient(to bottom right, #caf170, #9ec83d);
}
Media queries:
#media all and (min-device-width: 1101px)
#media all and (min-device-width: 768px) and (max-device-width: 1100px), (min-device-width: 1101px) and (min-width: 700px) and (max-width: 900px)
#media all and (min-device-width: 240px) and (max-device-width: 767px), (min-device-width: 768px) and (min-width: 240px) and (max-width: 699px)
#media all and (max-device-width: 239px), (min-device-width: 768px) and (max-width: 239px)
Add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in your <head> section.
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.
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>