I am developing a website by downloading some template from net.
I modified some width and height according to our requirement the output is fine in PC but when I check it in mobile the contents are overflowing against background.
Please help me with some solution to solve this problem.
Thanks in advance.
You need to consider below dimensions then you have to write accordingly in every media screen using #media queries.
/* 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 */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
Related
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.
#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.
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)