#media screen and (min-width: 320px)and (max-width:480px){
css instructions
}
is overwriting very different instructions in
#media screen and (min-width: 480px) and (max-width:640px) and (orientation:portrait){
css instructions
}
but not the
#media screen and (min-width: 480px) and (max-width:640px) and (orientation:landscape){
css instructions
}
I'm assuming it's something to do with the 480 but I"m being very specific about the device widths so can't see why this would be happening. There's another generic structure css file which holds the main style for all devices but for some reason the one being overwritten isn't reading these but the 320/480 rules. Any advice would be good.
Related
Product images are opening like direct link to image on mobile devices, or even in zoomed in browser, they should be opening in zoomcontainer like on desktop.
Wierdest thing is that, when i open my page on desktop on normal 100% zoom and zoom in to 300-400-500% it works perfectly, BUT when i refresh page on these zoom leves (page reloads already zoomed in) its not working at all, and images are opening like direct links to images.
I have no idea what even can cause this so i dont know what code to paste here, never experienced anything like this before.
Thank you for any help
You can check it here: https://winterland.sk/zimne-vychytavky/dotykove-rukavice
You have an additional div on top of your image id="#oknopredimg", so basically you click not image but that div. You can try to hide it.
#media (max-width: 1100px){
#oknopredimg {
height: 400px;
width: 100%;
background-color: #f000;
position: absolute;
z-index: 999;
display: none;
}
}
Same for other screens that you have #media (max-width: 992px)...
I want to change height of banner on different screen sizes, currently i am using below snippet.
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1366px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
But this code is creating problems, when i change the height of banner it change it for bigger screens also.
Now, i googled for this and found different answers and viewpoints of people regarding media query snippet. Below is what working for me, but it is fixed size and i have seen people are not generally using fixed ranges they are using max or min size only.
#media only screen and (min-device-width : 340px) and (max-device-width : 355px) {}
I want to know what is the correct and future-proof way of working with media queries.?
Refer below link and you will find the media queries for almost all the devices. That's correct way as well.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
container, by default, puts contents in the centre (with margins on the side) instead of filling up the whole screen.
What is the rationale behind this?
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
Is this a question regarding why, by design, container doesn't fill out the entre screen?
While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.
You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.
There's no best practice here, the better approach is largely based on the layout in question.
You can also use the container-fluid class, which makes everything percentage based. So instead of the container having a fixed width and being centered on the page, you then have container-width equal to 100% of the viewport.
I am designing a responsive website. In responsive web designing we cannot specify the image width and height in "img" tags. But without width and height the site is very slow. Is there any solution for this?
You can duplicate the image, one for large screen and one for small screens ( thumbnail ).
<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/>
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/>
Css:
.show-for-large {display:block;}
.show-for-small {display:none;}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.show-for-large {display:none;}
.show-for-small {display:block;}
}
And you can display:none the small img for large screen and on responsiveness you can do display:block;
The browser doesn't render the elements with display none, so this can be a trick.
The menu works great, except for a small range of screen sizes, around 764px.
The menu disappears.
http://pitts.mightysharp.co/wordpress/blog/test/
The break points cover it.
They are:
#media (min-width: 768px) and (max-width: 1024px)
#media (max-width: 767px)