Hello friends i have a website in which there are two headers , one header appears on mob view and other one appears on desktop view .I have used #media to hide and show the headers ,it works fine until i tilt my mobile. when i tilt my mobile the hidden header pops out here's a piece of code i used.
#media only screen and (max-width:767px) {
.mobcat{
display: none;
}
You could simple add (orientation: landscape) to your query like this
#media only screen and (max-width:767px) and (orientation: landscape)
{
.mobcat{
display: none;
}
}
or
#media (max-width:767px) and (orientation: landscape) {
.mobcat{
display: none;
}
}
Related
In my responsive website I want to control the way the website is viewed in mobile devices, and forbid viewing from landscape mode.
I searched through the stackoverflow site and found the option of putting a warning message.
I tried the css code below but it didn't work. Do you have any suggestions?
#media screen and (max-width: 980px) and (orientation:portrait){
#warning-message {
display:none;
}
}
#media screen and (max-width: 980px) and (orientation:landscape){
.content {
display:none;
}
.mobile {
display:none;
}
#warning-message {
display:block;
}
}
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
Source : https://www.w3.org/TR/css3-mediaqueries/#orientation
i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks
In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}
Add this medai query for iPhone 5 only
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.
I have a blog http://bdbloggerhub.com . It's fine in pc but when i visit it with mobile or tab it shows a blank pic above the post pic. How to remove it?
try adding .img-thumbnail{display:none;} at the end of your styles.
or for particular screen size add the following styles.
#media only screen and (max-width: 479px)
.img-thumbnail {
display none;
}
#media only screen and (max-width: 767px) and (min-width: 480px)
.img-thumbnail {
display:none;
}
you can also use the {width:0; height:0} properties in place of {display:none}
I am new to responsive design and i didn't get it properly till now. My question is that i need to write two media queries for 480*800 and 480*856 device for both landscape and portrait mode. Please explain it to me how it works ?
I have tried this query and it seems working for both the devices in landscape mode
#media only screen and (min-width:480px) and (max-width:854px) and (orientation:landscape)
#media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
body {
background-color:lime;
}
}
This would target both devices with the same css code.
Alternatively you could split it into two media queries and target each platform.
When I was new to responsive design I found this article very useful: http://css-tricks.com/css-media-queries/
You can try the following css styles:
media screen (max-width: 480px) and (max-height:856px) {
//code
}
media screen (max-width: 480px) and (max-height:800px) {
//code
}
media screen and (max-width: 856px) {
//code
}
media screen and (max-width: 800px){
//code
}
I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
#media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
#media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
#media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
#media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
#media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
For 320px I also tried with
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
#media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something?
Thanks in advance
Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
#media (max-width: 320px) {
html {
font-size:0.1em;
}
}
#media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
A
#media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
#media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
A and B are true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
Adding a min-width:321px requirement to B would force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
#media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
#media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
#media (min-width:769px) {
html { font-size:2em }
}