I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.
Related
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
Internal CSS works, but external doesn't. I've tried the external with the code !important, but it just didn't made any sense.
I want to add a gallery to my site. But I have a problem. As I've seen in the browser some margin overwrites the ext. CSS. But here's the thing, I have no margins in the HTML code. The only thing I can imagine is that the Bootstrap is doing something with high priority.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
position: static;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="gallery">
<a target="_blank" href="gtrr35.jpg">
<img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
</a>
<div class="desc">Nissan GT-R R35 Nismo</div>
</div>
Where is your custom css stylesheet linked?
It should be the last of all the other tags (fromm top-left to bottom -right), otherwise it gets overwritten due the cascading aspect of CSS...
I was trying to create an overlay but when I click on the button the overlay don't show up.
In the console log the error 'overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null' appears. I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. Thanks for the effort!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
Home
Profile
Images
About
Product
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name
<button id="open" href="#" class="open">Open Overlay</button>
The DOM hasn't been loaded yet. You need to put in the handler to the load event
I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>
There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>
I wanna to get element background value from javascript file.
I has three files -
html.html
css.css
js.js
html.html
<!DOCTYPE html>
<html>
<head>
<title> I'm Button! </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="myBlock" onclick="heyJS()"></div>
</body>
</html>
css.css
.myBlock {
width: 300px; max-width: 100%;
height: 100px; max-height: 100%;
margin: 0 auto; margin-top: 100px;
font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
line-height: 100px; position: relative;
background-color: #83DF31;
}
js.js
function heyJS() {
alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}
After running the scrpit,I only get blank alert box.
How can i get div background value ?
You can replace your alert() with this
alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);
or
alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);
And modify your html a little bit if you using the first one.
<div id="myBlock" class="myBlock" onclick="heyJS()"></div>
Try the following:
window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");