i'm having issues with CSS for width and margin. I'm making a web page for all device(PC, smartphone and tablet), using HTML <meta name="viewport" content="width=device-width, initial-scale=0" >and Px(not auto or %) as unit for CSS.
By now, during window resizing(browser PC), elements still rest in their position(works page) but, on mobile(smartphone and tablet) it looks differents results:
Any comment or solution for that could be helpful, thanks.
UPDATE CODE: Page is built like this example https://jsfiddle.net/1wfr3vpq/ All classes property sets to "auto", were originally in px(example:width:1024px; or margin-left:150px;)
using media-query you can do this.
For example, you execute some CSS only for desktop computers using min-width
#media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
body {
background-color: lightblue;
}
}
#media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
body {
background-color: yellow;
}
}
Also, see this great link. https://css-tricks.com/css-media-queries/
with this you can get the idea
Related
I have been doing a lot of research for days already on why this problem persists. So here it goes.
I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.
My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.
I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And this is how I declare my queries:
#media only screen and (max-width: 767px)
{
...
}
#media only screen and (max-width: 360px)
{
...
}
Now, to fix the client's demand I have added something like this
#media only screen and (max-device-width: 767px) to target specifically the smartphones.
For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.
You must have some other error in your CSS or HTML. If I add your mediaqueries to a normal CSS file it get's used by the browser if you resize the browser.
See the following snippet to see how the background color of the page changes based on width.
body {
background-color: blue;
}
#media only screen and (max-width: 767px) {
body {
background-color: green;
}
}
#media only screen and (max-width: 360px) {
body {
background-color: pink;
}
}
<p> TEST CONTENT </p>
the demo: https://codesandbox.io/s/bold-cloud-zsnss?file=/src/styles.css:937-1010
in the css file I have a media query that targets any device which has a width under 500px
#media all and (max-width: 500px) {
.wrapper {
display: flex;
}
}
However it didn't have any effects on the
<div class="wrapper">
A couple people are saying it is working fine. I have attached a screenshot to show that it is in fact not working.
I cannot figure out where it went wrong.
Another question is, what is the different between
#media all and (max-width: 1000px) {
}
and
#media (max-width: 1000px) {
}
I have seen both in examples of media queries.
The media query doesn't apply because the effective browser width is not small enough.
Add
<meta name="viewport" content="width=device-width, initial-scale=1" />
… to the <head>.
Without it mobile browsers (and tools which simulate them) will assume the design is intended for desktop browsers only and will zoom out to simulate having a desktop width screen.
See MDN for further reading.
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally.
It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.
I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason this is not working?
Clarification
I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.
there is fixed width given for inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all the 3 width to 100% for #media screen
more information on #media screens can be found here
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the right side footer content will come down as the left side content is more
screenshot
note : your footer will broke as fixed height is given you can remove it
for fixing your footer change css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
screenshot
I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works out.
Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.
#media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And big big difference is this, which will be applied on all 1024px screens
#media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT:
So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
What I don't know is if it will make any difference at this point.
It should work in theory, along with:
#media only screen and (min-width: 480px) {
/* landscape */
}
#media only screen and (max-width: 479px) {
/* portrait */
}
I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.
However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.
I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.
Adding this answer in case someone is looking for a reason why scaling is not working on his site.
Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.
What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling.
In my case this was the reason why it scaled some sites and others don't.
My website looks strange on my Nexus 5 (see image below). Although I cannot test it, I guess this is the same for other mobile phones.
I guess this is because of the #media queries. However, if I try this on a normal pc with different screen widths, it looks like it should be.
Two questions:
how can I fix this?
Is there a way I can test this behavior on my pc, so I can use firebug to see the css?
This is how the #media queries look like in my css file:
#media (min-width: 600px) {
.col-lg-3 {
width: 50%;
float: left;
}
}
#media (min-width: 900px) {
.col-lg-3 {
width: 33.33%;
float: left;
}
}
#media (min-width: 1000px) {
.col-lg-3 {
width: 25%;
float: left;
}
}
#media (min-width: 1000px) {
.container {
max-width: 980px;
}
}
The .container is the white box with the shadow, and the .col-lg-3 are the product boxes (4 in a row on a normal screen).
The .container should fill the screen on small screens, and be 980px wide on a big screen. However, it looks much smaller, and it looks like the .col-lg-3 has a width of 100%
To elaborate #zazvomiki you can correct this behaviour by implementing the viewport meta tag and specifying that the viewport width should equal the width of the screen. Place the following in the element of your web page:
<meta name="viewport" content="width=device-width, user-scalable=no">
To answer the second part of your question can you test this behaviour on your PC you can use remote debugging with Chrome for Android which allows you to use developer tools from your PC to investigate the page on your phone. Then you can make live changes as you normally would in Chrome to test different ideas.
Remote debugging for Chrome: https://developer.chrome.com/devtools/docs/remote-debugging
Chrome has very good emulation tools for mobile built into the developer tools. See https://developer.chrome.com/devtools/docs/device-mode
The sub menu UL have defined widths also so this may be causing the menu bar to be forced wider that the container. Check the whitespace of the menu text as well.