Sir, I was doing web development course on my laptop and it was going very fine, so I wanted to see the website on my phone so I copy-pasted the folder on my phone but I was unable to see the css changes.I also tried @import and @media functions.
Can pls help me out.
Hi @Divij,
As I can see from the above screenshots, the assets have not been loaded on the webpage due to incorrect path in your phone. Paste all your assets in the folder where your index.html file is present. Your updated include path will be similar to as shown below
<link rel="stylesheet" href="mystyle.css">
Do let me know if you are still stuck.
1 Like
hi @shobhit.kumawat I had already tried that. Kindly look at the below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Coffee store in India</title>
<link rel="stylesheet" type="text/css" href="Coffeeshop.css">
</head>
<body>
<div class="container">
<header class="coffee-header">
<div class="div-logo">
<img src="coffee_logo.png">
<span class="logo-text">Coffee Shop</span>
</div>
<nav class="coffee-nav">
<a href="#">Home</a>
<a href="#">Product</a>
<a href="#">Price</a>
<a href="#">About</a>
</nav>
</header>
<div class="site-content">
<div class="image-content">
<h1 class="quote">Coffee is the best thing to douse the sunrise with.</h1>
</div>
<div class="card-list">
<h1 id="product">Product</h1>
<div class="card">
<img src="mocha-image.png">
<div>
<h2>Mocha</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="cappuccino-image.png">
<div>
<h2>Cappuccino</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="americano-image.png">
<div>
<h2>Americano</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="latte-image.png">
<div>
<h2>Latte</h2>
<h3>₹250/-</h3>
</div>
</div>
</div>
<div class="order-section">
<h1 id="order">Order</h1>
<script type="text/javascript" src="https://form.jotform.com/jsform/220740393447052"></script>
</div>
</div>
</div>
</body>
</html>
Also suggest me if anything should be done to the css code or is developer option(on mobile platform) mandatory
body{
margin: 0px;
}
.coffee-header{
position: fixed;
left: 0px;
right: 0px;
height: 100px;
width: 100%;
background-color: #0a2d42;
z-index: 100;
}
.div-logo{
height: 100%;
text-align: center;
margin: 10px;
float: left;
}
.logo-text{
display: block;
font-family:"Helvetica Neue" ;
font-weight: bold;
color: white;
}
.coffee-nav{
float: right;
height: 100%;
}
.coffee-nav a{
color: white;
font-size: 15px;
font-family: "Helvetica Neue";
font-weight: 700;
padding-right: 20px;
padding-top: 12%;
display: inline-block;
}
.site-content{
position: absolute;
top: 78px;
width: 100%;
}
.image-content{
background-image: url("background-image.jpg");
height: 700px;
width: 100%;
text-align: center;
}
.quote{
color: white;
font-family: Helvetica Neue;
position: relative;
top: 10%;
}
.card-list{
width: 100%;
}
#product{
text-align: center;
}
.card{
width: 22%;
padding: 1.5%;
height: 300px;
float: left;
text-align: center;
}
.card img{
width: 100%;
}
.order-section{
width: 100%;
}
#order{
text-align: center;
}
.form{
width: 200px;
margin: 0auto;
}
.form input{
padding: 10px;
margin: 10px;
}
@Divij In that case, I would suggest you to use any HTML coding app from Playstore. You will get more clear output from those apps. If possible, please share the link to the folder that you are trying to open so that I can better help you regarding this.
One thing I noticed was when I sent this folder to the phone and when I try to open it from the laptop using the mobile link, for some reason the css was not linking properly, after inspecting, it was giving a error saying that it could not find the css file and other images. I also used some editor apps for the the program but no use.
Also tried on different phones and different browsers
Kindly look into the matter
Thank you
@Divij I am not able to access any of your files. Could you please resend the link for HTML and CSS files?
Is it fine if I just copy-paste the code, as the links are not working on this website. Please transfer this code to my mobile platform (tried on Xiaomi, realme, samsung phones)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Coffee store in India</title>
<link rel="stylesheet" type="text/css" href="Coffeeshop.css">
</head>
<body>
<div class="container">
<header class="coffee-header">
<div class="div-logo">
<img src="coffee_logo.png">
<span class="logo-text">Coffee Shop</span>
</div>
<nav class="coffee-nav">
<a href="#">Home</a>
<a href="#">Product</a>
<a href="#">Price</a>
<a href="#">About</a>
</nav>
</header>
<div class="site-content">
<div class="image-content">
<h1 class="quote">Coffee is the best thing to douse the sunrise with.</h1>
</div>
<div class="card-list">
<h1 id="product">Product</h1>
<div class="card">
<img src="mocha-image.png">
<div>
<h2>Mocha</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="cappuccino-image.png">
<div>
<h2>Cappuccino</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="americano-image.png">
<div>
<h2>Americano</h2>
<h3>₹250/-</h3>
</div>
</div>
<div class="card">
<img src="latte-image.png">
<div>
<h2>Latte</h2>
<h3>₹250/-</h3>
</div>
</div>
</div>
<div class="order-section">
<h1 id="order">Order</h1>
<script type="text/javascript" src="https://form.jotform.com/jsform/220740393447052"></script>
</div>
</div>
</div>
</body>
</html>
external css
body{
margin: 0px;
}
.coffee-header{
position: fixed;
left: 0px;
right: 0px;
height: 100px;
width: 100%;
background-color: #0a2d42;
z-index: 100;
}
.div-logo{
height: 100%;
text-align: center;
margin: 10px;
float: left;
}
.logo-text{
display: block;
font-family:"Helvetica Neue" ;
font-weight: bold;
color: white;
}
.coffee-nav{
float: right;
height: 100%;
}
.coffee-nav a{
color: white;
font-size: 15px;
font-family: "Helvetica Neue";
font-weight: 700;
padding-right: 20px;
padding-top: 12%;
display: inline-block;
}
.site-content{
position: absolute;
top: 78px;
width: 100%;
}
.image-content{
background-image: url("background-image.jpg");
height: 700px;
width: 100%;
text-align: center;
}
.quote{
color: white;
font-family: Helvetica Neue;
position: relative;
top: 10%;
}
.card-list{
width: 100%;
}
#product{
text-align: center;
}
.card{
width: 22%;
padding: 1.5%;
height: 300px;
float: left;
text-align: center;
}
.card img{
width: 100%;
}
.order-section{
width: 100%;
}
#order{
text-align: center;
}
.form{
width: 200px;
margin: 0auto;
}
.form input{
padding: 10px;
margin: 10px;
}
Thank you
Hi @Divij,
It depends on the android version that you are using. You need to put the absolute path of images/files in the case of android. You could find it by clicking details of a particular file in the file manager.
root/storage/emulated/0/Forum/index.html
To avoid this, you can host your files on the internet and use that link instead of local files. You can use https://imgbb.com/ to host images for free. Once you upload the image, you can find the link to the image file as shown in below screenshot.
Use this link in your image tag and your image file will load on any device.
<img src="https://i.ibb.co/HgH1Zq5/coffee-logo.png">
You can do a similar thing for all other resources in your code. If you do not want to host CSS on internet then you can include it inside the HTML file using the <style> tag.
I hope this answers your query. Do let me know if you are still stuck.
Thank you sooooooo much sir. This really helped me out alot, really appreaciated your help.
Pls can u suggest me some website where I can host my code
@Divij There are a lot of platforms to host your website. If you are looking for a temporary free solution then you can use https://www.hostatic.com/ or Github.
1 Like