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>
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;
}
}
Let me start over, as I clearly didn't post my question correctly.
I have a site with media queries and none of my queries are working. This is a Wordpress site build on the Genesis platform.
Header:
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
CSS with query:
#media only screen
and (min-device-width : 775px)
and (max-device-width : 1024px) {
#header {
float: none;
}
.another_site_inner-wrap {
float: none;
}
}
I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.
OPTION 1
#media only screen and (max-width: 775px) and (min-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
OPTION 2
#media only screen and (max-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.
321px is too small try 700px to test it first, if you are trying to change it when you shrink the window then use max-width.
Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it
Example:
#media only screen and (max-width: 700px){
div{
border-color:red;
border-width: 10px;
border-style: solid;
}
}
Read this and play with different querys :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set this at your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
i'm newbie and i have a site, i want to make a responsive design, it is responsive for mobile but not responsive on tablet, i want create tablet design like pc layout not mobile, can you help me how solved this problem? maybe meta viewport and css wrong code, how many px to create min or max media width?
this is my dummy site
http://silanycorp.com/a
and this site for check responsive layout
http://ami.responsivedesign.is/#
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS code
#media (max-width: 768px) {
.container{
padding:0;
}
.logo{
padding-left:0;
}
.hide-on-desktop{
display:block
}
.header-wrapper{
padding: 0;
}
.header-outer{
}
thanks for your help :)
You can have multiple stylesheets loaded based on the width of the viewport the user has.
This can be accomplished with the following tag:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You can also set it in the stylesheet with something like this:
#media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Here is a good article on the process: http://css-tricks.com/css-media-queries/
Good afternoon,
I am trying to make a website of mine responsive but i can't get it to work. I have been googling for about an hour or 3 and i am almost sure i am not doing it wrong but yet it does not work.
Here is my code:
#media screen and (min-width: 1230px) {
}
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
the best way i can best describe the problem is when i visit my website with browser in fullscreen it loads normally like i want it to but when i shrink the window it should load the other part of the css but just doesn't load any css. i putted display:none in there so that the page is white to see if it works.
I have
<meta name="viewport" content="width=device-width" />
in my html.
Url of the site: http://www.biebvragen.nl
Not sure if a allowed to answer my own question but it works now!
Instead of:
#media screen and (min-width: 1230px) {
}
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
I changed it to:
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
#media screen and (min-width: 1230px) {
}
And it seems to work fine now!
It works well with iceweasel on my linux, try with another browser or do a Ctrl + F5 refresh.
Maybe cleaning your cache can be the solution too, but your code works well, it's not a css problem, or it shouldn't work on my browser too.
I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.
I've tried to following:
#media screen and (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media screen and (max-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
I load it at the end of my head file and when i look at it in firebug it's there.
Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.
Ok I'm even doing this:
.logothingy {
border:1px solid;
}
#media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}
and it's putting the border and not doing the rest of it.
I have this in the head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.
I had the same dramas and noticed that i had missed this:
<meta name="viewport" content="width=device-width">
in the head of my index page. Added it and media queries all kicked in.
This is the correct one
#media screen and (max-width: 480px){
}
Try to put inside only .logothingy instead of div.logothingy and let us know if worked