I got a problem with website.
It's a jquery mobile framework, and the responsive design works well in Chrome and Firefox, but it does not in Safari on the mobile view.
i inspect it and looks like thet the media queries bellow 600px doesnt work.
Could you give me any help?
i wanna try whit some hacks but i dont know how to use it in media queries.
#media screen and (max-width: 320px){
.mi-slider {
text-align: center;
height: auto;
}
.mi-slider ul {
position: relative;
display: inline;
bottom: auto;
pointer-events: auto;
}
*/much more styles*/
}
Sorry for answer my own question, but i could fixed it, was easy, just making a new .css for hacks:
<link rel="stylesheet" href="css/webkit.css" media="screen and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
and there put the media queries
#media screen and (max-width: 1024px){
#text_biblioteca {
margin-left:24.553954%;
}
#image2_biblioteca {
margin-left:24.165918%
}
#box2_biblioteca {
margin-left:7.57416%
}
}
and done!!!
Related
So, I'm trying to use #media in CSS on my rails project.
I have a text which needs to be displayed only on mobile Heres the code
a.html.erb
<div class="A__b--c-d">
<%= link_to .......
....
</div>
b.scss
div.A__b--c-d {
display: none;
}
#media only screen and (min-width: 200px) and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
I cannot seem to get the text displayed on mobile.
Heres what ive tried so far.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pasted this in Chrome inspect element
All the names are right
You need to remove the .div and just select the max-width in your media query.
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
You made a mistake in your media query. Try this
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
I am having trouble with my responsive design on my iPhone 6. On the desktop, the css works, media query seems like its correct, but when I put it onto the server and actually test it on my phone, its as if nothing happened.
I've already used the meta tag and that helped it go into phone layout, but the text, img and button are all out of place.
My CSS:
#media only screen and (max-width: 308px) and (orientation: portrait) {
.jumbotron h2 {
bottom: 3em;
}
.jumbotron img {
bottom: -5em;
}
.jumbotron button {
bottom: -1em;
}
}
max-width: 308px
is too small
you can follow bootstrap size on phone
Phones (<768px)
so that you should change to
max-width:768px;
I'm in the process of creating my website. the url is: http://bvanlieshout.com
It's far from done but I want to finish the home page first before I even start looking at the other pages.
So what I've tried is making everything with %. Using:
#media only screen and (max-width: 768px) {
.frontImage{
display:none;
}
}
#media only screen and (max-width: 320px) {
.frontImage{
display:none;
}
}
#media only screen and (min-width: 769px) {
.navigation ul li {
display: inline;
width: 100px;
padding-left: 10px;
}
.nowWhat{
width:800px;
}
}
that works , sorta, when i check my mobile phone and open the page it doesn't hide the images. I'm guessing because the page width is still beyond 320/768 px. So basicly what im asking is some pointers, tips. Any help would be appreciated!
Thanks
Place this <meta name="viewport" content="width=device-width, user-scalable=no"> inside of your <head></head>
This is my first attempt at developing a responsive site. It's working fine in all browsers but IE9. I know that IE9 is compatible with media queries. I checked to see if compatibility mode was turned off and I don't see the icon visible so I believe that it is. My media queries are listed below the base styles. I'll just paste in a few media queries below so that I don't exceed any character limits. Let me know if you need to see more. Note: The doc type is for html5.
Media Queries:
#media only screen and (max-width: 479px) {
/* 320 =================================================== */
header .logo a {
background:url(../images/logo-320.png) no-repeat;
width:213px;
height:69px;
float:left;
margin-top:35px;
display:block;
}
}
#media only screen and (max-width: 480px) {
header {min-width:100%;}
.main-link-wrap {
width:100%;
margin:0 auto;
}
.featured-prod {
width:100%;
}
footer {
min-width:100%;
}
}
#media only screen and (min-width: 480px) {
/* 480 =================================================== */
header .logo a {
background:url(../images/logo-480.png) no-repeat;
width:310px;
height:94px;
float:left;
margin-top:5px;
display:block;
}
.featured-prod .product-box {
width:185px;
margin-left:1.8%;
margin-right:1.8%;
text-align:left;
color:#282828;
font-size:12px;
font-size:1.2rem;
line-height:13px;
float:left;
}
footer .address {
font-size:22px;
line-height:32px;
}
}
Tested with a very simple html5 page.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>
Referenced your stylesheet. Added
body {background: #F00;}
to the first query and
body {background: #00F;}
to the second query.
Background changes from red to blue as expected when resized in IE9, indicating that media query is working. I suggest try adding the same to your page to prove the media queries.
If the background changes as expected then there is something else wrong with your CSS (e.g. is it targeting the correct element; is another style overriding etc.)
If the background doesn't change then there is something unusual going on in your page, or with compatibility, etc.
Is there a reason you're using a max-width: 479px and a max-width: 480px media query?
I assume you're not seeing any of your styling in the max-width: 479px block? This is because those rules are being overridden by your max-width:480px rule.
Here's why, if a browser is 320px wide - that means it is less than the maximum width of 479px but it is also less than 480px (both conditions are satisfied). And because you've got the max-width: 480px block after your max-width:479px it's overriding those rules. My suggestion would be for you to include the rules in your max-width: 480px in your max-width: 479px block or vice-verse.
As an FYI, this problem is not IE9 specific - arranging your CSS rules in that sense will behave the same way across all browsers.
The website that I'm working on has a background image and a separate header image, and I'd like to use media queries to get them as well the text on the header image to resize appropriately for different screens. I've played around with a lot of options based on different tutorials, but I still don't think my stylesheet is working as it should be. Here's an example of my css:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
img {max-width: 90%;}
#wrapper { max-width: 90%; }
#wrapperbg { max-width: 90%; }
#header { max-width: 90%; }
#navlist { max-width: 90%; font-size: 80%; font-family: agency,
sans-serif; }
#navlist2 { max-width: 90%; }
#navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; }
}
I've included the line in the header as well:
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
I'm fairly new to trying to use media queries for a responsive design, so I know I'm making some ignorant mistake. Any help would be very appreciated. Thank you.
I think it should be
#media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)
{
//...
}
For more see this.
I had problems using media queries with a wordpress theme, and I fixed it by downloading a special plugin for mobile phones and creating style sheets that way. It is just called "mobile css". I actually created media queries within the plugin for things like landscape vs. portrait on the iPad, etc.