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;
}
}
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;
}
Here, the web page is displayed in a 1349x659 browser window. (it's exactly the dimensions of the image). With the body width set to 60%, the content is nicely packed and easily read.
Here I have resized the browser window to 478x642. And you can see that the 60% body width no longer gives the good view.
Since the web page can be resized without the server even knowing, the solution must be in the client side. Or done in the css file.
I suggest this algorithm:
If the visitor is mobile, then the body width should be 100% regardless of any other thing.
If the visitor is not mobile (tablet, pc, ...) then (
If the width of the browser window is larger than the height, body width will be equal to the window height.
but if the width is less than the height, then the body width is 100%.
)
Here is a fiddle
https://jsfiddle.net/rawj7vxc/
<body>
Some posts are not public. To access them, please login to your account, or register if you have none yet. By logging in to your account, you're no longer considered a "guest", this has some benefits which come with account promotions. Seeing more posts is one of those benefits. Registered accounts need verification. You'll be told how to this after the first unverified login. The verification will, however, not be immediate.
</body>
body {
background-color: rgb(31,25,0);
width: 60%;
padding: 0;
margin: 0 auto;
font-family: consalos;
text-align: justify;
color: rgb(215,200,0);
overflow: auto;
}
You need to look into using media queries. These will allow you to cater your design to the width and height of your screen.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Media Queries
You could use some framework like Bootstrap or media queries:
#media (min-width: 568px) {
.myDiv{
width: 550px;
}
}
#media (min-width: 992px) {
.myDiv{
width: 970px;
}
}
#media (min-width: 1200px) {
.myDiv{
width: 1170px;
}
}
Here you have more information: w3schools.com
And also about Bootstrap: getbootstrap.com
I think you could use the metatag viewport (see documentation here)
viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
In your head section, simply add following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want to add width: 60% only when the screen is "wide" you could use:
#media screen and (orientation:landscape) {
body {
width: 60%;
}
}
See here
I hope it helps you, bye.
Ok, here is my solution with pure javascript,
document.getElementByTagName("body").onresize=function(){
var fullwidth=screen.width;
var fullheight=screen.height;
if(fullwidth<aval){ //checking if mobile
/*
* make width 100%
*/
}
else
{
if(fullwidth>fullheight)
//make width = fullheight
else
// make width=100%
}
}
I have given you the logic structure only, if you want full css change(width and height change) code, mention here.
N.B. aval is the threshold value under which screen size device will be treated as mobile device
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;
}
}
I have an image that I'm sizing with a percentage of it's container, what I would like to do is to lower that percentage when the container is bigger (window is maxed) and a higher number when the window is shrunk.
Rather then write a script using some type of switch or multiple if statements I was wondering if anyone had any ideas on a possible math formula solution kind of thing.
For example a width 1080px would have a result of 1% and
a width of 358px would have 5%
You should be able to use media queries for this with varying width sizes. There is really no magic mathematical formula for this.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use the following media query to achieve this:
#media only screen and (max-width: xxxpx) and (min-width: yyypx){
#container img{
width: z%;
}
}
Example:
#media only screen and (max-width: 400px) {
#container img{
width: 5%;
}
}
#media only screen and (max-width: 1000px) and (min-width:401px){
#container img{
width: 3%;
}
}
#media only screen and (min-width:1001px){
#container img{
width: 1%;
}
}
Replace the pixel values with the desired values and set multiple range as required
For more on media query read this:
http://css-tricks.com/css-media-queries/
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