I am experiencing a very strange sizing issue where the width of all of the content on the page except for the nav bar shrinks as the device-width shrinks (on mobile).
Screenshot of Mobile: https://gyazo.com/461c5252c1f4749e6b18ed8ae7754ae0
Desktop Screenshot: https://gyazo.com/bfe36b73455cefe9803f5494f5bc1048
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Equilibria Network</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Here is the main layout of the page
class Main extends React.Component {
render() {
return (
<div id={"main"}>
<MainNav/>
<MainParallax/>
<ThreeCols/>
<TwitterParallax/>
<EquilibriaSection/>
<Roadmap/>
</div>
);
}
}
ReactDOM.render(<Main/>, document.getElementById('root'));
Github: https://github.com/thomasdparker1/equilibria-website-react
If you have any suggestions I would really appreciate the help! Thank you.
Related
I got this error
Uncaught Error: Target container is not a DOM element.
when I want to create a header for my web page and the problem that I'm following a YouTube video to learn react, and I got this issues and in the YouTube video he didn't have the same problem as me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
</head>
<body>
<div className="Home"></div>
<script type="text/babel">
class Header extends React.Component {
render(){
return(
<div className="w3-top">
<div className="w3-bar w3-red w3-card w3-left-align w3-large">
<a className="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i className="fa fa-bars"></i></a>
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
)
}
}
class Home extends React.Component {
render(){
return(
<header />
)
}
}
ReactDOM.render(<Home/>,document.getElementById("app"))
</script>
</body>
</html>
In reactDOM.render() you are rendering your app to document.getElementById("app") which does not exist on your page. You need to add an element with the id of app to your page so the react app can render to a valid element.
So somewhere in the body of your page add the element <div id="app"></div>
or if you are meaning to render your app to the Home element you need to change the function to say something like:
ReactDOM.render(<Home/>,document.querySelector(".Home")).
and then change your element to say something like:
<div class="Home"></div>
You only need to use className to specify a class inside of a react element. So <div className="Home"></div> is not valid html it should be <div class="Home"></div>. But inside a react element you would use <div className="your-class"></div>.
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
I'm using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
add these two lines in your site's Html because it is missing meta viewport tag.
I hope it would help you.
add this meta to your index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>win-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
Here is my entire HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=232, user-scalable=no" />
<style>
body {margin:0;width:200px;border:1px solid black;padding:15px;background:#ccff99;color:#004000;font-family:sans-serif;font-size:6pt}
</style>
</head>
<body>
<h1>Test page</h1>
</body>
</html>
If I understand right, the body should be the full width of the viewport (200+(1+15)*2 = 232) so why is it that the page renders with a viewport width of 360? I would expect that of device-width, not an absolute 232...
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});