For some reason, when I shrink the browser screen (chrome) on windows (not mac), or rotate on an ipad, the link color goes from white on black to white on white. The hover effect still works, but the links just completely disappear.
see here: http://www.keganquimby.com/pf/
You've this rule:
#media screen and (max-width: 1023px) and (min-width: 768px) {
#main-nav ul li a {
color: #fff;
}
}
On line 4798 of style.css i guess it's the cause.
Here's your problem
#media screen and (max-width: 1023px) and (min-width: 768px)
#main-nav ul li a {
color: white;
}
You have seted the link color to white, change that and it will work
Related
I am using custom $spacer variable for adjusting UI/page multiple elements size. how to use this under #media query? As below its not working. how to use different $spacer for different resolution? pls help.
#media (min-width: 1280px) {
$spacer: 16px;
}
#media (min-width: 1600px) {
$spacer: 24px;
}
I am using this loading screen animation I found on Codepen. On mobile devices I found the screen sizes to be really small. I am using media queries to increase the size like this
#media (min-width: 576px) {
.counter p, counter h1{
font-size:200%
}
}
The font size only increases after the loading animation reaches 100%. I cannot figure out why
Try this.
#media (max-width: 576px) {
.counter p, .counter h1{
font-size:2em;
}
}
I'am creating new web site. My intention is creating one page for desktop and mobile and set styles depend of device (mobile or desktop). I know I can achieve everything with pure javascript, but I would like to use also CSS and media queries. My question is: how can I set style only for mobile devices using CSS media queries? I was trying to use:
#media only screen{
style...
}
But it works for both, mobile and dekstop browsers.
You can not simply target mobile but have to give break point in order for it to work. You will have to use min-width or max-width for that to work
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
Example: This will hide div with class of sidebar and set container width to 100% on smaller screens
#media only screen and (max-width : 321px) {
.sidebar {
display:none;
}
.container{
width:100%;
}
}
Have you tried setting your styles based on screen-size rather than device?
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If the styling, and even content, is entirely different from mobile to desktop, using a framework like Bootstrap makes this really easy. You can follow their strategy by creating hidden-xs and visible-xs classes with your own media queries, and apply those classes to different divs. Not the DRYest way of doing it, but gets the job done.
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.hidden-xs {
display: none;
}
.visible-xs {
display: block;
}
}
Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?
Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}
You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}
using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)
#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}
Here is the website in question:
site removed
As you can see at the top right of the homepage there is a banner that overlays the graphics on the site. It shows the Rolex brand so customers can see the affiliation. Unfortunately, when you view it on a mobile device the overlay banner doesn't show up at all and I have no idea why.
Any and all help is appreciated, thank you!
It is defined in your bootstrap.css
#media (max-width: 480px) {
#overlay {
display: none;
}
}
The problem is not the mobile device but the screen width.
This is the one:
#media (max-width: 480px) {
#overlay {
display: none;
}
}