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.
Related
My HTML is as minimal as possible, moreover a content of id „content” is generated in JavaScript.
h1 has a static height based on font-size but I’d like to modify this (in css) if necessary, and at times h2 is showed, at times not.
Is it possible to set content= body - h1 height - h2 height, but if content > body height, then spread body? Without any external libraries.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main-styles.css">
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="apple-touch-icon" type="image/png" href="./favicon.png">
<link rel="stylesheet" href="#" id="custom-css">
<base href="./">
<title>Perfume Finder</title>
</head>
<body>
<h1>Perfume Finder</h1>
<h2 id="txt-title"></h2>
<div id="content">
</div>
<script type="module" src="./modules/script.js"></script>
</body>
</html>
So what I think you might need are "css functions", you can use the calc() function to kind of do what you want. I couldn't really understand what you were asking for in terms of the calculations themselves.
But here are a few links on where to start:
https://css-tricks.com/complete-guide-to-css-functions/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
Hope it helps
I want my entire body background to be red color. So I added this line in my index.html file in Javascript public html file:
<link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />
Now I did this to styles.css which is placed in same public directory:
body
{
background-color: red;
}
So what I observe is that when I place my stylesheet linking in head:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />
<title>React App</title>
</head>
it loads the background but then suddenly it disappears, but when I place the same stylesheet at the bottom of the body, it then loads.
<body>
<link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />
</body>
Does anyone know which default event is causing this issue and what could I do to keep my background red by keeping my stylesheet at the top as I want to load my page completely before it begins functionality.
You are using stylesheets inside your react application which are exposed after the first <link> tag where you declare your body color.
If you declare it at the bottom of the html, it will be read at last which means that it will override all other equivalent styles (previously declared inside react code).
If you want to force it, use !important but the correct way is to set it inside the react code where you declare all other css styles.
I have the following blank HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
When I run this via localhost inside iOS Simulator Safari, I get this:
Notice the scrollbars, which hopefully indicate how much wider and taller the page is than the viewport. This is despite my meta tag placed in the head.
The same cannot be said for desktop Safari, only when run on mobile Safari like this.
Why is this so wide and tall by default, and how do I ensure it's no larger than the viewport by default, without adding a bunch of CSS?
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">
I have coded a html page as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body bgcolor="#f2f2f2">
<div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
<div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
Hello world
</div> <!-- end container 2 -->
</div> <!-- end main container -->
</body>
</html>
The width of the div is 1000px and it is center aligned using the property margin:0px auto;
When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.
Why does this happen?
How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.
What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?
Please suggest.
Thanks
Thank you for the suggestions provided.
A slight modification solved the issue.
<meta name="viewport" content="width=1000" />
This worked.
Try to add this line to head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=1000, initial-scale=1" />
Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.