Media Query trouble - html

I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/

You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.

Related

<html /> element is only taking up half the screen

I am working on a React web page and I tried to see what the site looks like on mobile, so I switched to mobile view, and as you can see my element is only taking up half of the screen, so my content and my navbar and all my elements are actually only on half of the screen.
Here is my index.css
html {
padding: 0px;
margin: 0px;
overflow-y: scroll;
background-color: #ececec;
width: 100%;
}
body {
padding: 0px;
margin: 0px;
}
The table that you can see has a min-width attribute, so it can actually be seen, but its container div is also the same size as the html tag... Help!!
I noticed that the html element width is always as big as the screen of the device is, and it gets "stuck" at that point.. If I create a screen size that is 400px wide, the tag is 400px wide, and instead of wrapping all the content it's just a fixed width of 400px...
I added a min-width: 1000px to my #root and it looks okay now but my html width is still the same as my screen width which I think should not be like that
Maybe try this
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find more info about this here:
Responsive Meta Tag
Try setting the width as 100vw, not 100% and if this won't work, set min-width to 100vw, too

Viewport metatag doesn't make any difference

The meta viewport width=device-width doesn't seem to make any difference in my experiments. I made a test page to show you :
my main code is :
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
background: yellow;
}
.test_box {
background: red;
width: 360px;
height: 50px;
}
.test_image {
width: 16rem;
}
h1 {
margin: 0;
padding: 0;
font-size: 4rem;
line-height: 6rem;
}
p {
margin: 0;
padding: 0;
font-size: 2rem;
line-height: 2rem;
}
<!DOCTYPE html>
<head>
<title> My Project </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/styles.css">
</head>
<body>
<div class="test_box"></div>
<img src="/IMG/ham.svg" alt="image" class="test_image">
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
When I resize my window on a desktop it behaves the way it should.
But when I upload it to my server and see it on my Huawei p9 lite it doesn't fit. Either I put the viewport meta tag or not. It doesn't change anything !
(see in the pictures... at 1920px wide, 360px wide, and then on my mobile, either with the viewport meta tag or not. You can also see that mydevice.io recongnize my device as 360px wide)
What can I do ? Please help me. Thank you very much !
Its because you are checking it on domain wido.media and this domain does not contain any meta tag.
To check, open wido.media in your pc browser and view source by right click > view page source or press Ctrl+u
And wido.media open http://www.henriquevieira.com this domain in iframe and henriquevieira.com contain the viewport meta tag so if you open henriquevieira.com in your mobile you can see the difference
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
You got "fooled" by mydevice.io - if you scroll down on that site you'll notice a thing called CSS pixel-ratio, which in your case will be 3.
Here's an explanation of the pixel ratio
So your device simply is more than 360px wide

How to extend viewport to the full screen width?

I have a .body element on my page http://crimeansurfers.tumblr.com which has a border frame that should touch the edges of the screen.
body {
font-family: 'Arquitecta', sans-serif;
font-size: 13px;
color: ;
border: #00f 10px solid;
background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
It shows up fine on desktop (the frame touches the edges of the screen, however, when I open it on a mobile, it shows like this:
As you can see, the right frame is not touching the edge of the screen, but it's supposed to.
I'm using also viewport to resize display for mobile devices with the following parameters:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
What do I need to change in order for it to work as I intended it to?
Thank you!
UPD maybe it makes sense to render the frame using some other method rather than body CSS tag?
There is an overflow being caused by the ul element within the #thumbs div.
You can fix this by adding a media query to the bottom of your style sheet.
<style>
#media (max-width: 414px) {
#thumbs ul {
padding-left: 0;
}
}
</style>
In this case I've set a max width of the media query to 414px as the problem only shows on screen sizes smaller than iPhone 6+.

CSS and html not rendering well on mobile

I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">

Responsive images working in Chrome but not Firefox

I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:
http://ellenflaherty.com/projects/carland/
Any idea why the discrepancy?
Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.
I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.
I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.
.projectimg {
bottom: 0;
/* display: inline-block; REMOVE THIS */
/* float: left; /* REMOVE THIS */
height: auto;
margin-left: 220px;
margin-right: 30px;
overflow: hidden;
width: 80%; /* THIS */
}
Hope that helps
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of HTML. It will help to adjust page size according to screen size.