I am having the following issue:
When I load my page in portrait view on my device it triggers the portrait media query - CORRECT
When I tilt the device to landscape it triggers the landscape media query - CORRECT
When I tilt the device back to portrait it still triggers the landscape media query - NOT CORRECT
My media queries look like this:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body, a, p, label, input, h1, h2, h3, h4, h5, h6, table, tr, td, div, textarea, button, span {
font-size: 16px;
}
}
#media only screen {
body, a, p, label, input, h1, h2, h3, h4, h5, h6, table, tr, td, div, textarea, button, span {
font-size: 11px;
}
}
Any help would be appreciated!
I fugured out what the problem was. I'm using a Samsung Galaxy Tab 10.1 as the test device and it must have an issue when tilting the device. I tried it on my Galaxy S2 and it worked fine
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?
Here, I am creating a new web application using Angular 2 framework and applying media query for responsiveness. I am new to this design. I had used two screen breakpoints i.e 600 and 960 and trying to test the responsiveness accordingly. But one of my query not getting apply i.e. 600px.
This is my code,
#media screen and (max-width: 600px) {
mat-card{
width:50%;
height:60%;
margin:9% 9% 9% 19%;
font-size:8px;
}
.fullwidth{
width:50%;
height:50%;
font-size:11px;
padding:10px;
}
mat-card-title{
font-size:13px;
font-weight:bold;
}
mat-card-subtitle{
font-size:11px;
}
}
#media screen and (max-width: 960px) {
mat-card{
width:50%;
height:60%;
margin:9% 9% 9% 19%;
font-size:8px;
}
.fullwidth{
width:90%;
height:50%;
font-size:11px;
padding:10px;
}
mat-card-title{
font-size:13px;
font-weight:bold;
}
mat-card-subtitle{
font-size:11px;
}
}
But in actual browser only media query for 960 is getting applied on 'fullwidth' class.
How can I apply media query to 600px size?
Also how many screen sizes needs to be queried for proper responsive design?
see if this helps you: https://codepen.io/panchroma/pen/pLaJZy
Remember that all CSS rules that are applicable will be applied to an element, and CSS rules cascade. With your original CSS, if the viewport was say 500px, your two media queries would be true, so the last one would be the styling that would be applied.
Instead of your original
#media screen and (max-width: 600px) {
...
}
#media screen and (max-width: 960px) {
...
}
Consider something like the following
#media screen and (max-width: 600px) {
...
}
#media screen and (min-width:601px) and (max-width: 960px) {
...
}
With the above CSS, if the viewport is 500px the first media query will apply, if the viewport is 700px the second media query will apply.
Hope this helps!
I am trying to use media query to display text box with different styles for iPhone5,iPhone6,Samsung galaxy SIII and Samsung galaxy S4. For iPhone 5 and IPhone 6 I am getting desirable result. Now when I switch from iPhone to Samsung s3 I am getting correct output but when I try to switch to S4 from S3 I am getting wrong output. Here's the style that I am using for media query. Attaching the screenshots also. I am not getting the actual problem here.
<style>
#media only screen and (device-width:375px){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: yellow;
} }
#media only screen and (device-width:320px) {
.homeDOB{
width:60% !important;
height:80px !important;
background-color: black;
} }
#media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:2){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: gray;
}
}
#media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:3){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: red;
}
}
</style>
For Galaxy S4, device width it hits at is a little over 400px. Try changing your media query to:
#media screen and (max-width: 480px) {
.homeDOB {
width:60% !important;
height:80px !important;
background-color: black;
}
}
and see if it work on your mobile phone. Also, this is the viewport must use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
device width for samsung galexy s3 and s4 is 640px.
Try this
#media only screen and (max-width:640px){
//your CSS rules
}
Here you can find list of device width/height http://www.canbike.org/CSSpixels/
I have added a vertical banner position (div class = "werbe-wrapper") at the RIGHT HAND SIDE of my webpage golfanatics.de. This position is, however, not shown when looking at the website with a tablet (eg. iPad) or a mobile phone.
The website is based in Joomla, the template allows for a responsive layout which I have DISABLED.
Any idea, where I could look at, in order to have the above position being displayed?
Thanks and cheers,
Ralph
In your custom.css is:
/* Handhelds */
#media (max-device-width: 480px) {
.nomobilebanner {
display: none !important;
}
...
}
and
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.nomobilebanner {
display: none !important;
}
.noipadbanner {
display: none !important;
}
}
This is where your issue is coming from.
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
}