Hello so i have tested my new site and it seems like that site with other resolution does not work so good.
Here is first picture (1920x1080)
And second screen (1360x768x)
I have also added some Media Queries, but still wont work.
#media only screen and (max-width: 1200px) { }
#media only screen and (max-width: 959px) { }
#media only screen and (min-width: 768px) and (max-width: 959px) { }
#media only screen and (max-width: 767px) { }
#media only screen and (min-width: 480px) and (max-width: 767px) {
.checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
#media only screen and (max-width: 479px) {
.checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
I am guessing that your object that those numbers are on is absolutely positioned...
Try making that big box container
position:relative
That should at least keep it inside of that.
My advice would be look into something called "Bootstrap CSS" in order to make your website compatible on all screen resolutions and screen sizes.
http://getbootstrap.com/css/
Apologies for my answer being extremely vague, just trying to help :)
Hope this helps,
Sohail.
Related
I tried searching on the internet for an answer and I couldn't find one that worked. I want to make my site responsive to mobile where the li elements become smaller on the screen when vertical. This is my code, I did put in a link to the style sheet where it is and did put the meta viewport part in the heading section.
#media only screen and (max-width: 400px) {
.list {
width: 30px; height: 20px;
}
}
Here are some common standard points:
#media (min-width: 320px) { /* for iPhones and smartphones */ }
#media (min-width: 481px) { /* for larger phones and small tablets */ }
#media (min-width: 600px) { /* for tablets */ }
To be honest, it would be really helpful if there was such thing as #media (min-size: iPhone) or #media (min-size: windows_tablet); it would make it a whole lot easier.
Guys how to make this kind of things in creating a website
This is the full picture:
When I scale down the browser it will turn out like this
What you're looking for are #media rules. With #media rules you can not only apply different designs for different output devices (screen, printer, braille, ...), you can also specify different designs for different screen sizes.
Example:
p {
font-size: 120%;
}
#media (max-width: 1000px) {
p {
font-size: 110%;
}
}
#media (max-width: 600px) {
p {
font-size: 100%;
}
}
Other possible properties are max-height, min-width and min-height.
The rules can be combined:
#media screen and (max-width: 600px) and (min-height: 800px) {}
Media Queries - MDN
I'm having problems making my custom <h2> class used on text responsive for mobiles
I want to make the this h2 class resize to a text size of 49px when viewed on a mobile device.
This is what I've tried so far:
#media screen and (min-width: 320px) {
h2.josh {
text-size:49px;}
h2.josh {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
font-size: 79px;
color:white;
font-family: 'Oswald', sans-serif;
opacity: 0.9;
display:inline-block;
display:inline-block}
.dark-text{color: #1e1e1e}
body { padding-top: 0px !important; }
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { h2.josh { font-size:49px !important; } }
You're missing a bracket at the end. And try using !imporant with the style rule because maybe you have style rules applied within the element itself!
You're missing a closing curly bracket after the media query
#media screen and (min-width: 320px) {
h2.josh {
text-size:49px;
}
}
First off, do not use !important. Its not a good practice. And once you close the media query it should work. Also, keep using min-width rather than max-width. Modern development should be mobile-first and min-width is a best practice.
What is
text-size:49px; /*should be **font**-size*/
Also call this #media query after the other css not before or you will have to search whole document for the over ride. Always load these in last and you have put min-width?
In this case you should be using max-width and use say 640px or 720 for the mobile devices etc. So everything less than eill take this style and as its being loaded last will take.
I am new to #media screen so please be gentile.
I do not have a fluid setup but rather a fixed setup for 3 different device setups.
Mobile = max-width 500px.
Tablet = max-width 740px.
Laptop/desktop/desktop hd = width 980px.
--
So am I correct is saying the following:
#media (max-width: 500px) { }
#media (max-width: 740px) { }
#media (min-width: 741px) { }
You need to have the smallest screen-width last, like this:
#media (min-width: 741px) { }
#media (max-width: 740px) { }
#media (max-width: 500px) { }
As the CSS reads from the top to the bottom, then with your max-width: 740px will overlap, as 320px is still less than 740px.
You could also set a min-width:
#media (max-width: 500px) { }
#media (min-width:501px) and (max-width: 740px) { }
#media (min-width: 741px) { }
Then you can place them as you want.
EDIT:
This is actually better:
[ CSS For 741px and above here ]
#media (max-width: 740px) { }
#media (max-width: 500px) { }
This way, you just need to fix widths, font-sizes and such in the media-queries, and you don't need to write background-colors and font-colors if they should stay the same.
I need help to change % width on my category images within my site whenever my screen gets smaller. Or the images will get super small on smaller resolution.
What I want to achieve is something like this: http://www.twitch.tv/directory
I've tried to do this by using this code. (but it isnt working)
.category-list-item {
float: left;
#media screen and (max-width: 769px) {width: 20%;};
#media screen and (min-width: 480px) {width: 25%;};
#media screen and (max-width: 480px) {width: 33.33%;};
padding: 1em;
Would be super greatful for any help!
/ Martin
As rekire says, you messed the syntax, and you need to set full rules.
Also, there shouldn't be semicolons after the rules.
And lastly, your 2 final rules cover all the posibilities, width being greater or smaller than 480px, so the first rule will never apply.
I have changed it so that you have an style for lower res, another for higher res, and the default applied in between
.category-list-item {
background-color:red;
}
#media screen and (min-width: 769px) {
.category-list-item { background-color: green; }
}
#media screen and (max-width: 480px) {
.category-list-item { background-color: blue; }
}
<div class="category-list-item">Test</div>