I am new in web developing and I just finish my first website: www.aviakassir.az
But I face the problem when try to open my website on mobile device. Some part of my header not diplayed at all (contact and languages line on top). Menu is splitted into two parts and search script located down the image.
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
<meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aviakassir</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/jquery-customselect.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/assets/revolution/layers.css">
<link rel="stylesheet" href="css/assets/revolution/navigation.css">
<link rel="stylesheet" href="css/assets/revolution/settings.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
What I missed here? Here how my page looks in mobile Chrome:
Check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
#media only screen and (max-width: 767px)
.header-top-left {
display: none;
}
set display: block;
Related
Since one month I always tried to fix my mobile SERP favicon and google recrawled my site many times in the meantime. Even though it's still not working. The GSC isn't showing it either, same with Lighthouse...
What have I done wrong?
Here is my favicon code:
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="https://eselsbruecken-generator.de/data/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://eselsbruecken-generator.de/data/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://eselsbruecken-generator.de/data/favicon-16x16.png">
<link rel="manifest" href="https://eselsbruecken-generator.de/data/site.webmanifest">
<link rel="mask-icon" href="https://eselsbruecken-generator.de/data/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="https://eselsbruecken-generator.de/data/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/data/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- favicon end -->
I am grateful for anything helpful...
Have a nice day!
I am working on creating a web application using react js and material ui,
but I am not getting responsiveness in the app.
This is the code in my head tag:
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App</title>
</head>
If you use the npm for installing the material-ui there is no need for hardcoding any scripts or CSS link at the index file. the installed module via npm will handle all injections.
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
if you are insisting to not use the npm , include the following at the index head tag
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
a very simple code-sandbox which copy-pasted form material-ui examples shows that it works correctly and fully responsive,
in that sample, you can see that the Grids are responsive and get stacked at reducing the page size.
I'm new to React material-ui. I used their guide and created simple Appbar (same as theirs). However, my appbar looks different than theirs:
My Appbar:
It should've looked like this:
https://codesandbox.io/s/m3m1x5qxw8
I have installed npm install #material-ui/core
I have added Roboto fonts to my index.html in the head part.Here is a screenshot of my index.html
My code is literally same as their code, only changed the function name. However, this AppBar is located under this:
<div> // it is the root div
<Header2/> // the appbar
Their color is not the same, their font is not the same.
What did I do wrong?
As it turns out I shouldn't be using react material-ui and react-bootstrap together:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I intend to use react-material-ui, but for those who wants to use both of them together, if you have a solution, please share it :)
I want to add a favicon to my react application but it doesn't seem to working.
Tried the below:
add the code to the index.html file in the head section
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.
Thanks.
Remember to add %PUBLIC_URL% to all your href attributes in index.html
For example;
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
That should fix your issue.
Can we load multiple sources on iron-component-page for generating the demo DOCS.
For Example:
<iron-component-page sources='["page1.html", "page2.html","page3.html"]'></iron-component-page>
Thanks in Advance.
Create a file all-imports.html and then use it in src attribute of index.html file
all-imports.html
<link rel="import" href="page1.html">
<link rel="import" href="page2.html">
<link rel="import" href="page3.html">
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>paper-input</title>
<script src="<>/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="<>/iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="all-imports.html"></iron-component-page>
</body>
</html>
Take inspiration from the "components/paper-input" package, which includes "paper-input" element, but "paper-input-container", "paper-input-behavior"... as well.
You'll have to replace your desired sources='["page1.html", "page2.html","page3.html"]' with the well-documented src attribute referring to a brand-new file all-imports.html in this way
yourpage.html
...
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
...
<iron-component-page src="all-imports.html"></iron-component-page>
...
therefore referring your ["page1.html", "page2.html","page3.html"] source array, through a single-line-link file
all-imports.html
<link rel="import" href="page1.html">
<link rel="import" href="page2.html">
<link rel="import" href="page3.html">
Similarly to what Srik yet wrote.
NB: the upper left corner element drop-down, will likely appear page-children elements documentation too (in any)..