On the current RWD website am building, the media query used for mobile(iphone)/tab(ipad)/laptop screens(1366X768 px) are:
/* #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
#media only screen and (min-width: 100px) and (max-width: 479px)
/* #Mobile (Landscape)
----------------------------------------------------------------------*/
#media only screen and (min-width: 480px) and (max-width: 767px)
/* #Tablet (Portrait)
----------------------------------------------------------------------*/
#media only screen and (min-width: 768px) and (max-width: 959px)
/* #Tablet (Landscape)
----------------------------------------------------------------------*/
#media all and (min-width: 1400px) and (max-width: 1920px)
/* Smaller than standard 960 (devices and browsers) and larger devices */
#media only screen and (min-width: 959px) and (max-width: 1177px)
/* Desktops and laptops (laptop browser version styles) ----------- */
#media only screen and (min-width : 1224px) and (max-width: 1366px)
Are these the right ones am using?
yes , also include these for a perfect RWD
// Little larger screen
#media only screen and (min-width: 480px) {
}
// Pads and larger phones
#media only screen and (min-width: 600px) {
}
// Larger pads
#media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
#media only screen and (min-width: 992px) {
}
// Really large screens
#media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
If you use Sass, here's a little trick I've been using:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
And then
#media #{$laptop-size} {
// Styling here...
}
Related
I learn rectjs and use the react-bootstrap NavBar. I use the suggest breakpoints from Media Queries docs and it looks like this:
Here is my Media Queries breakpoints:
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) and (max-width: 1920px) {
I made a CodeSandbox
NOTE: set browser window to 100% zoom in the CodeSandbox for this to work!
My problem is when I resize window and get under width 905px. Then I can't fine grain control layout in css so layout starting to wrap:
This is how it should look:
Under 905px toggle button jumps down:
Under 758px it looks even more bad
I try to change the css:
.container-fluid { // THIS IS LOGO IMAGE
.navbar-brand {
max-width: 37%;
}
}
.form-inline { // THIS IS THE SEARCH INPUT
width: 80%;
}
The problem is I think that I can't move the SEARCH INPUT and the buttons to the left as the screen width gets lesser. Changing the form-inline width to lets say 40px cuts it of only on the right side.
Any advice is helpful thanks?
Moving the button to the left on this image would do the trick I guess but how?
How can I make react-icons icons size smaller for mobile? I understand pixel is not a good approach, but how should I do it?
import { FaSearch, FaFacebook, FaInstagram, FaUserCog, FaUserTimes } from "react-icons/fa";
<FaSearch
color="#023373"
size="30px" />
You can use #media query in your case. Add a class to your icon component and write media query for mobile device width.
<FaSearch color="#023373" className="SearchIcon" />
In your CSS, do this
.SearchIcon{
font-size: 40px;
}
#media only screen and (max-width: 400px) {
.SearchIcon {
font-size: 20px;
}
}
I created a working example using Stackblitz
Here's a list of all the #media queries for different device widths.
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
Another approach is to handle icon sizes on their wrappers. You can set the icon size to auto and change their parent size. You can do it on media queries or with any other method.
<IconContext.Provider value={{ size: 'auto' }}>
<App />
</IconContext.Provider>
Ok the question has been asked many time before and I went through each and everyone of them but it didn't worked for me
In mobile view I want to set slideshow col position from Relative to Static which will result into this
But instead I'm seeing this on mobile (adjacent col is overlapping)
which means Col is still in relative position and media Queries are not working on mobile platforms however It does work in Desktop Chrome browser.
I used meta tags and different combinations of min and max values (after confirming screen resolution)
for example
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
section.banner .slideshow-col{
position: static;
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 320px) {
section.banner .slideshow-col{
position: static;
}
#media (min-width : 700px) {
section.banner .slideshow-col{
position: static;
}
#media (min-width: 992px) {
section.banner .slideshow-col{
position: relative;
}}
#media (min-width: 1200px) {
section.banner .slideshow-col{
position: relative;
}}
My website is here http://
Any hint?
Try to use this solutions
#media screen and (max-width: 760px){
.slideshow-col {
position: relative;
height: 300px; <-- height of the slideshow
// You can use min & max height of slideshow for mobile devices
height: auto;
min-height: xxx;
max-height: xxx;
}
}
I have used media queries for other resolutions which is as follows: #media (max-width: 767px) and (min-width: 0px) {...} #media (max-width: 1366px) and (min-width: 768px) {...} #media (max-width: 1024px) and (min-width: 768px) {...}
Since the client wants specific look on these resolutions. But now on higher resolutions the website is distorting and i need the right query which says "Any screen resolutions above 1920x1080 including retina display should have this look". Else i feel i will have to write queries for specific famous resolutions above 1920x1080.
//(1920x1080) Full HD Display
#media (min-width: 1920px) and (max-width: 2560px) {
//insert styles here...
}
What code can I use to make a particular div show only if on a mobile width?
I have a 100% width full div at the top of my screen, would like it to only show when the device is specified as a mobile width.
I'm not sure, what you mean as the 'mobile width'. But in each case, the CSS #media can be used for hiding elements in the screen width basis. See some example:
<div id="my-content"></div>
...and:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content { display: none; } /* hide it elsewhere */
}
Some truly mobile detection is kind of hard programming and rather difficult. Eventually see the: http://detectmobilebrowsers.com/ or other similar sources.
It sounds like you may be wanting to access the viewport of the device. You can do this by inserting this meta tag in your header.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.w3schools.com/css/css_rwd_viewport.asp
Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
#my-content{
width:100%;
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
#my-content{
width:100%;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
display: none;
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
// Havent code only get for more informations
}