Hey I'm having a problem with a wordpress site I'm working and for some reason the logo doesn't margin to the left on the safari for the Ipad. The media query I added doesn't effect the logo change in portrait view. It works fine with android devices and all other devices except IPAD,Can someone please help here's the link to the site, Thanks really appreciate yet.
link: www.annesub17.com
here's the code
#media (max-width: 999px){
.logo {
margin-left: -17px;
}
}
Related
Just confused - I have this css rule on my table making the table stack on mobile. Seems to work fine in Chrome and android.
But on the apple devices it is not stacking and I cannot work out why, If anyone has any idea why could you please let me know.
#media handheld, only screen and (max-width: 480px){table td {
display: block!important;
clear: both;
width: 100%!important;}}
Figured out it was the .doctype
I am sending a email from desktop/laptop to mobile devices, but it loosing css like line alignments spaces and text is coming horizontal.
so please tell me what css I must have to use for android and ios mobiles,
i am using this CSS but not working...
#media only screen and (max-device-width: 566px) {
.campaign_tem {
width: 80% !important;
}
.table_align {display:none !important;width:100%;color:red;}
} `
I ran into this not too long ago, but gmail only accepts inline-styling so nothing in the header.
I created website with responsive menu for PC-browser and Android-browser for Samsung S5 using
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
Menu works only on PC. When website is running on mobile browser (native and chrome also) then .menu block seems to get wanted size but is still invisible, although there is no display: none.
I used z-index for solving my problem but nothing happend and still i can't find bug. When .content display is set on hide, then .menu looks ok. Div .menu seems to be underside(?) of .content but if does, then why z-index doesn't work correctly?
This is this site Website. Can somebody check that issue?
I found problem. Height of .navigator was set on 3em. Div .menu was inside .navitagor
I have read 10+ questions concerning this issue, yet no one solved it for me..
I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!!
as much as I can tell, it fades then slides, which gives a horrible transition effect. =(...
Please Advice..
[UPDATE] Feel free to edit the repo (if possible)
I couldn't find any suitable solution for this issue but I have something like a hack to overcome it
upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.
add those lines to your css main file:
/** To fix white flash between transitions**/
.ui-overlay-a {
background-image: url(../img/bg.png) !important;
background-repeat: repeat !important;
background-color: #182633 !important;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
update ".ui-overlay-a" css with corrosponding backgorund color and image.
Good afternoon. I have a task to understand what is happening. Website was made before me.
If you try to resize the browser to 320x240 you will see that the site is adapted, and if you go through the mobile phone Android it is not. Someone can tell what's wrong? Where to start looking?
Website is using MasterPages. Almost all elements are HTML.
LINK
mif.antaris.ua
you need to look in css files for #media tags.
it seems like the mobile css has a max-width: 320px or something similar.
anyway, try putting all mobile css inside something like:
#media only screen and (max-width : 400px) {
/* mobile css */
}
this will apply the css code within the #media block only when screen width is lower than 400px.
hope that helps.