HTML and CSS mobile content zoomed in? - html

Hello I have created a website: Omicrome.com The desktop version works find bar a few things I am still working out that are irrelevant. When I go onto the mobile version everything is zoomed in. If I dont set the viewport and put in:
<meta name="HandheldFriendly" content="true"/>
The content fits the way I want it on my Android HTC one m9. I run a "is my site mobile friendly test" and It says it isn't mobile friendly because I have not set the viewport and the content dosnt fit the screen, on my phone it does but on the image on those sites it is all zoomed in. If I do set the viewport then everything is zoomed in on my phone and on those websites. Here is a quick snippet of the head part of my page.
<html class="HTML1">
<head>
<title>Omicrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"language="javascript" type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="img/icon.ico" type="image/x-icon" />
<link rel="ICON" href="img/icon.ico" type="image/ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/MobileStyle.css">
<meta NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="The homepage for Omicrome.com, where you get the best of technology, science and making. We have on going projects and many articles for your enjoyment.">
</head>
<body>
<div class = "container_24" style="min-height: 100%;">
<header>....
Why does this happen and can I fix this. By the way I do have media queries for the css:
#media screen and (max-width:380px) {
#HTML1{
}
#rectban{
position: relative;
width: 100%;
height: 120px;
margin-right: 6px;
background: #ffffff;
}
#ULBTN{
margin-top:-13px;
}.....
I did try setting HTML1 to have a margin and padding of 0 and set their widths and heights to 100% but still it didnt work. Feel free to visit the page and tell me if it is zoomed in or not.

Try to set this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

This is the proper mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">

Related

How to define a meta tag for responsive layout?

Have I made a mistake when writing the code? And if not, is there another way to link CSS to HTML Page? I have tried a couple different ways of writing it but nothing seems to work.
Here's how I wrote it...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
I also tried...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link = rel="stylesheet" href="css/style.css"/>
</head>
Thanks
You wrote viewport as viewpoint in your meta tag.
In your first snippet, change this:
<meta name="viewpoint" content="width=device-width, initial-scale=1">
To this:
<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap and/or media queries not working on Github Pages

I want to host a website using GitHub Pages. I was able to upload it, and it works perfectly on a computer. However, when I open it on a phone the Bootstrap and/or media queries is not working, because the website looks like its shrink to fit, instead of taking the responsive layout I coded.
Right now my files look like:
index.html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- JS (end of body) -->
<script src="js/custom.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
responsive.css
#media only screen and (max-width: 768px){
.header-picture{
display: none;
}
The problem is that on my phone the website looks like this: non-responsive
When it should look like this (according to responsinator): responsive
I followed
Bootstrap / CSS not working on Github Pages
and tried to fix it by adding the file location on github. However, I got the same result
index.html
<!-- Meta tag for responsive websites -->
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/style.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/responsive.css">
<!-- JS-->
<script src="https://EmiliaPaz.github.io/js/custom.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.js"></script>
<script src="https://EmiliaPaz.github.io/js/bootstrap.min.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.bxslider.js"></script>
What I find really curious is that when I put my website URL (https://emiliapaz.github.io/) on responsinator.com , it shows that it should work on smaller screens but it doesnt!
Thanks for the help, I am really stuck
There's a typo with your <meta> tags (width-device-width).
Change from:
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Meta viewport needs to fit the device width on safari IOS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For More Info Reference Stack Question below:
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

Firefox: no CSS errors/warnings in the log

I created a site with a bogus CSS code:
a {
foobar: 8888;
}
Then opened the page in Firefox. I looked in the web console and I can see no errors/warnings. Why?
My html head is:
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="http://localhost:35729/livereload.js"></script>
</head>
There is no warning in web console because wrong CSS rules simply has no effect in the page.

Buttons in UI won't work until after page refresh in internet browsers

Buttons in my UI no longer work until after page refresh since adding the "font-awesome" CSS link in the head element of my main .jsp file.
Before my change (buttons worked):
<head>
<title>Foo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="web/ui/lib/bootstrap/v3_2_0/css/bootstrap.min.css" rel="stylesheet">
<link href="web/ui/css/cloudoe_iframe.css" rel="stylesheet">
After my change (buttons no longer work until refresh):
<head>
<title>Foo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="web/ui/lib/bootstrap/v3_2_0/css/bootstrap.min.css" rel="stylesheet">
<link href="web/ui/css/cloudoe_iframe.css" rel="stylesheet">
<link href="web/ui/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
I don't know that much about head elements and linking to CSS files, but clearly linking to the font-awesome CSS file is what broke it. By the way, Font Awesome is an open source icon library that I am using.
Example of a button:
<button style='float:right; margin-right: 20px;' class='darkBlueBorderButton' id='DownloadSDKsLink' href='#'>Download SDKs</button>
and the CSS:
.darkBlueBorderButton{
background-color: transparent;
height: 30px;
color: #152935;
border: 3px solid #152935;
width: 140px;
}

Using Bootstrap when I reduce the size of the screen the components move and eventually move out of format

I'm writing my first website using Bootstrap and CSS style sheets with VS2015 and it all lines up perfectly when in full max screen. However, when I start to reduce the size of the screen, instead of the scroll bars taking over, the components move and eventually all fall out of line.
Below is how I have set out my html screen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Bootstrap-->
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
</head>
How can I set my components to fixed and just allow the scrolling whatever size of the browser?
I have spent quite a bit of time browsing on this and I've experimented with #media and other CSS changes but nothing works.
If I understand correctly, you are looking for this (which I don't recommend):
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Here is an article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
You can also try placing min-width onto your outermost container, like this:
#your-main-page-wrapper-around-everything { min-width: 1200px; }
Bootstrap CSS is intended to be responsive, so your other option is to study their grid css: http://getbootstrap.com/css/#grid
This would give you control over how the columns will wrap, so you won't have to prevent user scaling.