I'm not sure whether this is possible, but using webkit I made a custom scrollbar that doesn't show up on mobile, so there is a gap on the right side of the screen where it should be (instead, the default chrome one appears). It shows up perfectly fine on desktop.
Is there anyway of:
a) making this scrollbar show up on chrome mobile browser.
b) hiding the custom scrollbar on mobile only, so the gap doesn't appear, but also allowing the custom scrollbar to show on desktop simultaneously.
::-webkit-scrollbar-thumb {
width:5px;
background-color:black;
}
::-webkit-scrollbar {
width:5px;
background-color:white;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background-color: white;
}
If you whant only css solution, you can use media queries like this:
#media only screen and (max-device-width: 736px) {
::-webkit-scrollbar-thumb,
::-webkit-scrollbar,
::-webkit-scrollbar-track {
//default styles
}
}
But if you want to detect touch screen, you need to use some js, my favorite lib for this task is modernizr.
Related
At some point in developing my site, the mobile menu stopped displaying any of my navigation.
I tried to make the nav show up by changing the stylesheet e.g. color of text, z-index, background color etc but none of my changes have shown up. (see below)
I may be reading the dev tools incorrectly, missing a style that could help, or there could be something more complex afoot.
#media screen and (max-width: 600px) {
#mobile-navigation-jquery {
background-color:rgb(28, 34, 48)!important;
z-index:200;
}
#menu-header,
#menu-item-49,
#menu-item-442,
#menu-item-56,
#menu-item-54,
#menu-item-51,
#menu-item-667 {
z-index:200;
color: black;}
}
i'm using a bit of CSS to hide a div off-screen (and then jquery to animate it in) using this :
body {
overflow: hidden;
}
.hide {
position: absolute !important;
left:100vw !important;
}
On desktop, the div is being properly hidden, and no scrolbar appear, but on mobile, it is possible to scroll to the right and see this div.
Browsers not having the issue : Chrope/Edge/Firefox (All latest version as of today) on Win10
Browsers having the issue : Safari iOS (ios 9.x), Dolphin for android (latest) and firefox mobile (also latest)
See code here : https://jsfiddle.net/nfpwccvj/4/
Is there a way to solve this ?
Thanks.
You forgot to close the body }? Or it's just this example with this mistake?
First of all left:100vw is not Cross-Browser supported, best practice for full width is width:100%. If you want to hide something on mobile, you need to use media query.
.hide {
display:block;
}
#media (max-width:480px) {
.hide {
display:none;
}
}
I was hoping someone could help. I was having an alignment problem with a responsive website I was building when altering the orientation. So I used the following css to try to fix my web page. The odd thing is that it is having the effect of shrinking some other images elsewhere in the website so that they get progressively smaller each time I alter the orientation relative to the fixed width object next to them which stays the same size. The changing images in question have different css tags to the ones in the code below but have % sizes. When I remove the CSS code below the strange behaviour stops.
The 4 objects in questions are divs connected to apache wickets. They sit in a page which is divided into 3 areas with tables (don't ask.) The other two areas have fixed width objects which are unaffected.
This unexpected thing happens on my iPad but not my android tablet. On the iPad it happens in both Safari and Chrome. I could probably fix it by giving fixed sizes to iPad objects in CSS, but I'd rather understand what's happening. Here's the CSS
#media screen and (orientation:landscape)
#Button1 {
clear:left;
float:left;
width:380%;
padding-top:0%;
padding-bottom: 0%;
padding-left:20%;
min-width:220%; }
}
#media screen and (orientation:landscape) {
#Value1 {
clear:left;
float:left;
padding-left:20%;
font-size: 520%;
font-family:"Times New Roman", Times, serif;
font-style: normal;
line-height: normal;
color:#CF3;
}
}
#media screen and (orientation:landscape) {
#Button2 {
clear:left;
float:left;
width:380%;
padding-top:5%;
min-width:220%;
padding-left:20%;
}
}
#media screen and (orientation:landscape) {
.symbol {
font-size: 320%;
color: #FFF;
}
}
Corresponding entries for portrait followed, so that there were options for portrait and browser mode. If anyone can explain this behaviour I'd be most interested and grateful. To re-iterate, images in another part of the site are affected when I change their orientation, and only on iPad. The images that are the target of this CSS are behaving exactly as they are supposed to, on all platforms.
I'm familiar with responsive design + CSS.
But for some odd reason the only media query that isn't working is the mobile dimension style.
I'm using chrome to monitor what style is being applied and it only loads the min-device-width styles only.
Does anyone know why this is happening?
I also have the below in my index file.
UPDATED
<link href="styles.css" rel="stylesheet" type="text/css">
#media (max-device-width: 480px){
/* Styles */
#profilebody_avatar
{
width: 10em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
#media (min-device-width: 1024px){
#profilebody_avatar
{
width: 20em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
"Your rule says max-device-width not max-width, which means, as long as your monitor is wider than 480px, you're not going to see anything different. Either check on a small screen or update it to max-width for Responsive Design rather than Adaptive."
You can use Chrome to pretend change the "device width" by pulling up the Inspector (right-click and Inspect Element) then click on "Show Console" button in top right (looks like a > with three horizontal lines next to it) click on Emulation tab, and then choose a Device to emulate (pick iPhone 4, it has a max-width of 320 [well, 640 but with a font-scale factor of 2, which is 320.]) Then hit Emulate and it will update the "device width".
I.E.:
Your max-device-width is the width of your monitor, not browser window. So, mine is 1920px. It won't change unless I change my monitor's resolution.
Your max-width is the width of your browser window. That, unlike the above, does change on resize.
I'm using html5 template with responsive layout and it works just fine (in all major browsers).
I'm using wide, 728px ad (google adsense) in the header, and I would like to hide it, when viewport width is less than 728px. So I modified the css file - added
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
}
to the end of file. Everything works perfect in firefox and chrome. But IE10 doesn't hide the banner, when changing the window width.
modified code:
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
body {
background:yellow;
}
}
also doesn't hide the banner in IE, however, the background change is applied...
Do you have ayn idea, why IE doesn't hide the banner?
Thanks
IE has a few well known bugs, one of which is the one you've encountered.
try visibility:hidden;