Hi I got an issue when running my project on mobile browser. The entire content (except navbar cause its absolute position) is pushed to the left.
Page on mobile device:
I've tried to run the project on mobile view (desktop browser) and got no issue. Any idea how to fix it?
Page on desktop browser
Edit: This is the main layout for the HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sinona</title>
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/icon/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/icon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/icon/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('assets/img/icon/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('assets/img/icon/safari-pinned-tab.svg') }}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body id="page-top">
#include('landing.partials.navbar')
<main class="main">
#yield('content')
</main>
#include('landing.partials.footer')
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('js/scripts.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/lazy_load.js') }}"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
I also use bootstrap and my own custom CSS. Since the code is pretty long, you can see it on these links, bootstrap (styles.css), https://snippet.host/gxop, my own (custom.css), https://snippet.host/eqzn
Edit 2:
Since the abnormality appear on whole content, I assume the problem is related with the body or root main content. These are related css:
styles.css
...
*,
*::before,
*::after {
box-sizing: border-box;
}
#media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
...
custom.css
:root {
--accent-1: #356f4a;
--accent-2: #2a5333;
--accent-3: #fbb41f;
}
.main {
min-height: 80vh;
}
• Okay the problem why your website is pushed to the left is , you need to tell the browser to adjust the content size according to the screen size 🖥️.
• THE SOLUTION :
<meta name="viewport"
content="width=device-width">
• You just need to add this code inside of your "head tag".
• EXAMPLE :
<!DOCTYPE>
<html>
<head lang="en" dir="ltr">.
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
• I hope this would solve your problem 🙂, Have a great day 👍, Bye.
I could be wrong about this but I thought, in the viewport meta-tag that shrink-to-fit not only prevents shrinking it prevents proper scaling. You could try removing that part just as a test to see what happens.
What I think is, somehwere on your page is an element which is too wide for the viewport (this could be because of horizontal margins or padding) or it is simply wider than everythign else on the page (not contained) and your shrink-to-fit is trying it's best.
This is just a guess.
After decades of debugging, it's finally solved. Looks like the entrance animation for each component overlapping the screen and pushing whole content to the left. I already fixed it by making the the body hide the content when overflowing,
overflow: hidden;
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
When I'm trying to add my angular web app as a shortcut to my home screen from my iOS safari it is coming as a screenshot of my app page, although I added an apple-touch-icon link to my index.html. where my image is 150*150 size and a png. below is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insights</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
After some research found that it is my bad having src in the below line.
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
changed it to the below worked
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">
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?
It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:
I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.
Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");
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">