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;}
}
Related
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
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.
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 have template for e-mail list, in html + css.
http://tsiskreli.highlander.ge/next.html
Here it is. There is no php, javascript, only html and css everything in this file.
In all browsers (chrome, firefox, explorer) I see it fine, top text is in right place and table looks fine.
My costumer sees it so:
http://s1.postimg.org/7c4iffav3/image004.jpg
I see it so even with 300% zoom:
http://s21.postimg.org/t1jltp0fb/Screenshot_12.jpg
Why my costumer sees this empty space in at the border and why reservation goes down for him?
Because you ask the CSS to do so. Try to view it under 480px screen and you will get the some result as your customer. After inspecting your CSS i found this :
#media only screen and (max-width: 480px){
td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
padding-right:18px !important; /* This is it */
padding-left:18px !important; /* This is it */
padding-bottom:0 !important;
}
This media query is causing the padding :
#media only screen and (max-width: 480px){
td[class=mcnTextContent] {
padding-right: 18px !important;
padding-left: 18px !important;
}
}
Remarks :
Don't duplicate the media query for each property: you can group them all inside one.
Use !important with caution.
Don't use table for layout, and especially not like this: your html structure is a mess.
Consider adding the relevant code in your question by the way.
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;