I wanted to make responsive website, and I used media query.
One thing I don't understand is, iPhone 6 and LG G5 has different image size. What I figured out is many android device's image size is same.
Is this about IOS and Android problem? or my codding is wrong?
#media only screen and (max-width: 1920px) {
.btn{
width:70px;
height: auto;
}
}
#media only screen and (max-width: 764px) {
.btn{
width:50px;
height: auto;
}
}
#media only screen and (max-width: 364px) {
.btn{
width:40px;
height: auto;
}
}
Thanks for helping :)
Try with
I phone 6 media Query
#media (max-width:667px){ /* do something here */ } /*landscape view*/
#media (max-width:375px){ /* do something here */ } /*portrait view*/
Related
I have a clickable icon image in the header of my web page; I want to hide the icon image when the page is pulled up on a desktop, laptop, and/or any larger screens. However, I want the icon to show when the page is pulled up on a mobile device/ phones and hand-held tablets.
This is what I tried:
#media screen and (min-width: 0px) and (max-width: 700px) {
.ghost {
margin-left: 500px;
/*show the icon on smaller screen*/
}
}
#media screen and (min-width: 701px) and (max-width: 1024px) {
.ghost {
margin-left: 500px;
display: none;
/*hide the icon on larger screens*/
visibility: hidden;
}
}
/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
...could I get some help with this please? ...thanks
Hi
If you want to display icon JUST on <= 700px devices your code should look like this below. Setting min-width: 0px in first #media and max-width: 1024px in second is unnecessary.
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
}
}
#media screen and (min-width: 701px) {
.ghost {
margin-left: 500px;
display: none; /* Acts like this item isn't there at all */
visibility: hidden; /* Doesn't show the item, but saves space for it */
}
}
I don't know your full issue, but if you want to act like it isn't there on large screens this CSS below will be better ;)
.ghost {
display: none;
}
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
display: initial;
}
}
More info about media queries you can find e.g. on this W3Schools site.
Cheers
Try this
You have to write only one media query. Like this
#media only screen and (min-width: 767px) {}. It for mobile devices.
.ghost {
display: block; /* default it will show in mobile devices. */
}
#media only screen and (min-width: 767px) {
.ghost {
display: none; /* it will hide larger than 765px eg: laptop and desktop */
}
}
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
The standard resolution for desktops is 1024px.
For tablets, it is 768px and for mobile it is 320px;
So to hide the image for desktops and above, you could do the following:
.ghost {
cursor: pointer;
}
#media (min-width: 1024px) {
.ghost {
display: none;
}
}
<div onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
I'm sure there is a simple answer to this question. Instead of having the left div appear first on mobile (media queries), as it naturally would, how would I make the right div appear first instead?
The left div would appear first on desktop view.
<style>
.left {
width:27%;
float:left;
}
.right {
width:70%;
float:right;
}
</style>
<div id="tier-1">
<div class="left"></div>
<div class="right"></div>
</div>
Just write the right div first.
Use a media query. Like this:
#media (max-width 500px){
.right{
float: left;
}
}
Of course, 500px could be anything. Chrome developer tools let you emulate different sizes and even have some preset phone resolutions. Nonetheless, You could completely change how everything is formatted with media queries.
See this description from w3 schools.
by using media queries we can change the css value of all the html elements.
commonly media queries are write in 4 common screens . also customization is possible .
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
for mobile device 767(landscape) and 479(portrait). use below media query for your question.
#media only screen and (max-width: 479px) {
.left {
width: 27%;
float: left;
height: 50px;
background-color: #393318;
color: #fff;
text-align: center;
}
.right {
width: 70%;
float: right;
height: 50px;
background-color: green;
color: #fff;
text-align: center;
}
#media only screen and (max-width: 479px) {
.right {
float: left;
}
.left {
float: right;
}
}
}
<div class="left">leftdiv</div>
<div class="right">right div</div>
Thank you everyone for your contributions, but I ended up finding a solution on this URL: Use CSS to reorder DIVs
I used the CSS3 Flexbox Layout Module. Thank you again!
I want my page look nice with iphone4 and iphone 5. I wrote some media queries, but it seems they are ignored:
#media only screen and (max-device-width: 480px) {
#gpsMain{
position:absolute;
top:25px;
left:20%;
}
}
#media only screen and (max-device-width: 320px) {
#gpsMain{
position:absolute;
top:11px;
left:20%;
}
}
Why the styles are not applied? Is this the correct way to get resolutions of the two iphone?
(The queries are the last thing I wrote on css document)
Double check to see if you have a viewport set. Not sure if it matters but I always see media queries formatted like so:
#-ms-viewport {
width: device-width;
}
#viewport {
width: device-width;
}
#media screen and (max-width: 400px) {
.list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; }
}
This is from the 2014 wordpress theme. http://www.responsinator.com/ is a good place to double check how things are looking.
Try change into this:
#media screen and (max-device-width: 480px) {
#gpsMain{
position:absolute;
top:25px;
left:20%;
}
}
#media screen and (max-device-width: 320px) {
#gpsMain{
position:absolute;
top:11px;
left:20%;
}
}
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}