I have CSS below. My screen resolution is 1280x800. Why is my class .landslide not getting the margin value 10%? Right now it's always getting 18%? Even my screen resolution was 1280x800 which should be matching the max-height:800px.
What am I doing wrong?
#media (max-width: 1380px), (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
#media (max-width: 1380px), (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
Reverse the rules, otherwise the second one will always overwrite the first one:
#media screen and (max-width: 1380px) and (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
#media screen and (max-width: 1380px) and (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
Related
#media only screen and (min-width: 275px)
{
body
{
background-color: black;
}
}
I want to make the background color black when it detects 275px - 500px and i want to make the background color blue when it detects 500px - 750px.This is a reference only simply i want to make css codes with different ranges
Also you can write first media query only min width because another media query also set min width.
#media only screen and (min-width: 275px) {
body {
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px) {
body {
background-color: blue;
}
}
Just add a max-width to complete the range:
#media only screen and (min-width: 275px) and (max-width: 500px)
{
body
{
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px)
{
body
{
background-color: blue;
}
}
I have a mobile layout for the website I am building, where the image of a mobile screen has to always appear a till it's navigation buttons. Below is the design mockup of how the image should look
I am using media queries, the width of the image and margin-top to position it according to the mockup. But at certain viewports, the image appears completely above the screen, which is mostly due to the different viewports resulting in different values for the percentage based units I am using.
An example image of what I am trying to convey:
Is there a better approach to position this image, so that it always shows up to its navigation bar, so that the position is consistent atleast in a particular viewport range, if not every viewport?
Any help is appreciated.
the website for reference : https://hackertronix.com
.mobile-phone-img {
display: block;
margin: 3% auto 0;
width: 70%;
}
#media screen and (min-width:24em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 85%;
}
}
#media screen and (min-width:25.75em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 66%;
}
}
#media screen and (min-width:30em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 60%;
}
}
#media screen and (min-width:37.5em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 65%;
}
}
#media screen and (min-width:42em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 55%;
}
}
#media screen and (min-width:48em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 50%;
}
}
#media screen and (min-width:50em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 45%;
}
}
#media screen and (min-width:55em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 40%;
}
}
<div class="mobile-card">
<h2>
Tracker
</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
<img src="images/getOnGooglePlay.png" class="mobile-button">
</a>
<img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>
Well known media query resolution for almost every devices.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
My WordPress Website Using Quidus Theme contains unnecessary space from the right which looks very bad. Please help: How can I remove this space? I want my web pages to fill the whole screen. There is no margin needed on the right or left sides.
Look at the image provided below of my website.
My Website Link is here
Note: I want all posts to fit the screen full width.
Your HTML structure is:
<div id="page">
<div class="site-content"></div>
<div class="right-sidebar-wrapper"></div>
</div>
Your CSS is:
#media screen and (min-width: 955px) {
.site {
max-width: 1718px;
}
}
#media screen and (min-width: 1105px) {
.site-content {
width: 56%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.site-content {
width: 70%;
}
}
#media screen and (max-width: 480px) {
.right-sidebar-wrapper {
width: 100%;
}
}
#media screen and (max-width: 768px) and (min-width: 480px) {
.right-sidebar-wrapper {
width: 100%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 70%;
}
}
#media screen and (min-width: 1105px) {
.right-sidebar-wrapper {
width: 22%;
}
}
The problem with your CSS is .site-content and .right-sidebar-wrapper width don't make it 100% of their parent.
Let's clarify:
at window width > 1105px .site-content = 56% while .right-sidebar-wrapper = 22% so 56% + 22% = 78% but 100% - 78% = 22% which is where the margin comes from at this resolution
at window width > 955 and < 1105 .site-content = 70% and .right-sidebar-wrapper = 70% which makes your right sidebar display below .site-content because 70% + 70% = 140% so #page can't contain at at the same line
To solve this change .site-content and .right-sidebar-wrapper CSS rules for their width so they take 100% of their parent's width at resolutions you want them to display next to each other.
Possible solution is to change:
#media screen and (min-width: 1105px) {
.site-content {
width: 56%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 70%;
}
}
to:
#media screen and (min-width: 1105px) {
.site-content {
width: 78%;
}
}
#media screen and (max-width: 1105px) and (min-width: 955px) {
.right-sidebar-wrapper {
width: 30%;
}
}
Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: http://origami.directory/)
What can I do so it changes 3 times as it should do?
.category-list-item {
float: left;
padding: 1em;
}
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
};
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
};
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
};
If someone could help me fix this I would be super grateful!
/ Martin
Remove the extra semi-colon ; from the end of your queries.
Your queries should be like this:
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
}
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
}
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
}
Your queries are conflicting with each other making the second query obsolete. Specify a range for each like this:
#media (max-width: 480px) {
.category-list-item{width: 33.33%;}
}
#media (min-width: 481px) and (max-width: 768px) {
.category-list-item { width: 25%; }
}
#media (min-width: 769px) {
.category-list-item { width: 20%; }
}
I'm not very sure with the min-width:769px part so just let me know what exactly are you trying to do and I'll fix that accordingly. The above is just to show you how queries work basically.
Right now I have this code in my HTML document:
<style type="text/css">
#media handheld
{
footer{
padding: 5% 0;
}
footer h6{
font-size:.4em;
}
}
#media screen and (max-device-width: 900px)
{
footer{
padding: 5% 0;
}
footer h6{
font-size:.4em;
}
}
#media screen and (max-width: 320px)
{
footer{
padding: 5% 0;
}
footer h6{
font-size:.4em;
}
}
#media screen and (-webkit-device-pixel-ratio: 1.5)
{
footer{
padding: 5% 0;
}
footer h6{
font-size:.4em;
}
}
</style>
As you can probably see from this code, I want to apply the same two properties to the same two elements for each of these media conditions. I was wondering if there was a better way to do this—without linking to an external CSS document. Thanks!
Read this. Commas act like OR operators.
#media screen and (max-width: 320px), (max-device-width: 900px)