When i run the website on Android or Windows the text renders normally and everything works super smooth but when I run the website on iOS the text is just gone. Like it never existed. All other elements tuck in. It is almost as if all text has display: none;
not working on iOS
working on Android
Here is my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="normalStylesheet" rel="stylesheet" href="style.css">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<title>Tungstun Design and ICT</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_section">
<div class="header"
data-aos="header-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<ul id="header">
<li id="homeButton" class="headerItem"><a>Home</a></li>
<li id="workButton" class="headerItem"><a>Work</a></li>
<li id="contactButton" class="headerItem"><a>Contact</a></li>
</ul>
<img class="header_logo" src="images/logo#2x.png">
</div>
<div id="homeSection" class="logo_container">
<img class="logo" src="images/logo#2x.png">
</div>
<div class="buttons_container">
<button id="workMainButton" class="button primary_button">Work</button>
<button id="contactMainButton" class="button secondary_button">Contact</button>
</div>
<div class="image_div">
<img src="images/bgovals#2x.png" id="bgOvals">
</div>
<div class="circle_div"
data-aos="tagline-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<img src="images/bgcircle#2x.png" id="bgCircle">
<h1 id="tagLine">A small IT and design company based in Utrecht</h1>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="workSection" class="work_content">
<h1 class="title">My work</h1>
<ul id="workList" class="work_list">
<li>
<div class="work_li_div">
<img src="images/amblogo.png" class="work_image">
<div class="work_name_div">Alles met boeken</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/Herfst.png" class="work_image">
<div class="work_name_div">VanGister</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/logo-transparent#2x.png" class="work_image">
<div class="work_name_div">Heimstel</div>
</div>
</li>
</ul>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="contactSection" class="contact_content">
<h1 class="title">Contact me</h1>
<h2>Let's make something great together!</h2>
<div class="form_div">
<form>
<label for="formName">Your name</label><br>
<input id="formName" type="text"><br>
<label for="formEmail">Your e-mail</label><br>
<input id="formEmail" type="email"><br>
<label for="formType">What can I do for you?</label><br>
<select id="formType"></select><br>
<form action="formMessage">Anything to add?</form>
<textarea id="formMessage" type="text"></textarea><br>
<button id="formConfirmButton" type="button">Shoot!</button>
</form>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<script src="work.js" type="text/javascript"></script>
<script>
AOS.init();
</script>
</body>
</html>
And here my css
#font-face {
font-family: gotham_medium;
src: url(font/GothamMedium.svg);
src: url(font/GothamMedium.ttf);
}
#font-face {
font-family: gotham_book;
src: url(font/GothamBook.svg);
src: url(font/GothamBook.ttf);
}
html, body {
background-color: var(--tungstun-background);
margin: 0px;
font-family: 'gotham_medium', 'Open Sans', sans-serif;;
text-rendering: optimizeLegibility;
}
Your implementation is correct, but the .ttf file is corrupted. Chrome is more forgiving than safari, but you can see that the font behaves weird on chrome, too (compare the two pictures using your font and the browser default font)
Load the font from a trusted source and if you refactored that font using an online service, try another one. The website itself works, you can test it by changing the font.
Related
I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Desktop - 21</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
<link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
<div class="auto-group-ntce-Q5G">
<div class="auto-group-4ge6-XQn">
<div class="auto-group-bez8-T3Y">
<img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
<div class="auto-group-jkh4-gwt">
<div class="image-2-pHQ">
</div>
<p class="item--kRx">الدخول</p>
<img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
</div>
<p class="item--n7k">المساعدة والدعم</p>
<p class="item--Fn2">الاسئلة المتكررة</p>
<p class="item--YFL">
<span class="item--YFL-sub-0">
تعرف على
<br/>
</span>
<span class="item--YFL-sub-1">حصيف</span>
</p>
<img class="image-10-o4n" src="./assets/image-10-hop.png"/>
</div>
<div class="line-6-7rA">
</div>
<p class="item--rYr">حصيف</p>
</div>
<p class="item--N1Q">الخدمات العدلية الالكترونية</p>
<div class="auto-group-u3mu-E3c">
<img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
<p class="item--rqg">الدخول</p>
</div>
</div>
<div class="auto-group-nyy8-jea">
<div class="frame-2-fHL">
<p class="item--C2N">حصيف</p>
<p class="item-920072390-79L">920072390</p>
</div>
<p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
<div class="auto-group-vefu-2fc">
<p class="item--xZG">مواقع التواصل الاجتماعي</p>
<div class="auto-group-wyye-EWn">
<div class="auto-group-m8ae-xhg">
<img class="image-16-usp" src="./assets/image-16-HBY.png"/>
<img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
</div>
<img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
</div>
</div>
<p class="item--dSS">
<span class="item--dSS-sub-0">
المساعدة والدعم
<br/>
<br/>
</span>
<span class="item--dSS-sub-1">
الاسئلة الشائعة
<br/>
<br/>
دليل المسخدم
<br/>
</span>
</p>
</div>
</div>
</body>
I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style
Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue
In the Function12, once you export the code, you can check the styles over here.
I've been trying to change my fonts with Google Fonts in my HTML / CSS, but it keeps on remaining at its default font. I've googled everywhere and still the same. Could there be something wrong with my code?
My html code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<script src="myscripts.js">
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="script/script.js">
</script>
<title>The Story Maker</title>
</head>
<body>
<h1>The Story Maker</h1>
<p>Fabricate a comical, romantic, jovial, or even petrifying story with this story maker! Let your imagination and creativity loose!</p>
<div class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Create A Story</li>
<li>About Us</li>
<li>Donate</li>
</ul>
</nav>
</div>
<div id="showContainer">
<div class="imageContainer" id="img_1">
<img src="https://s3-ap-northeast-1.amazonaws.com/pro-ww-wordpress/libre/uploads/sites/2/2018/03/08091927/Disney-Meet-80cr.jpg">
<div class="caption">
The Tale of the Snow White
</div>
</div>
<div class="imageContainer" id="img_2">
<img src="https://66.media.tumblr.com/51c436b44f5ec312055a7ed22cc6dd2b/tumblr_osyb8fvLA81thrhjso1_400.jpg">
<div class="caption">
The Horror Tale of the Dolls
</div>
</div>
<div class="imageContainer" id="img_3">
<img src="https://66.media.tumblr.com/4dca7a847bd3fe0dae5bcfefddf850fb/tumblr_phrz8lNkHI1qcpptho1_640.jpg">
<div class="caption">
The Romantic Tale of Sara and John
</div>
<div class="imageContainer" id="img_3">
<img src="https://i.pinimg.com/originals/1c/f5/a0/1cf5a0e20fdd174956031fff77376f17.jpg">
<div class="caption">
The Adventures of Felicity
</div>
</div>
<div class="navButton" id="previous">❮</div>
<div class="navButton" id="next">❯</div>
</body>
</html>
My css code:
h1 {
font-family: 'Oswald', sans-serif;
}
I even tried using a font like Arial and nothing happens. No change in the output.
Try it internally, maybe?
<style>
h1 {
font-family: 'Oswald', sans-serif;
}
</style>
Or check if you named your css file styles.css?
Your code is fine, this must be a problem with your browser. These are the browsers that support Google Fonts API:
Google Chrome - version 4.249.4+
Mozilla Firefox - version: 3.5+
Apple Safari - version 3.1+
Opera - version 10.5+
Microsoft Internet Explorer - version 6+
This is the HTML file I am working with. I tried to make the part that I am working on bold but it wouldn't work so I will just tell you, it's the line item with the class "right" that is about halfway down. If you notice, there is text that says "COMPLETE TASK" which is inside of that line item, and also an "a" reference tag. Basically, it works as a clickable item when running the application, and the color of the text by default seems to be white. I have to change the color of that text, and I am struggling to get it to work. What I tried previously was:
li.right a {
color: blue;
}
That did nothing. Any ideas?
<html>
<head>
<title>To Do List | Pro Web Apps</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="screen" href="css/proui.css" />
<link rel="stylesheet" media="screen" href="todolist.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/prowebapps.js"></script>
<script type="text/javascript" src="todolist.js"></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Chris Hughes To Do List</h1>
<div class="task" style="display: none;">
<h3>Task: <span class="task-name"></span></h3>
<p class="task-description"></p>
<p class="task-due">
<label>DUE IN:</label>
<span class="task-daysleft"></span>
</p>
<ul class="task-actions">
<li class="right">COMPLETE TASK</li>
<li>START WORKING</li>
</ul>
</div>
<ul class="buttons">
<li><a class="changeview" href="#alltasks">Show All Tasks</a></li>
<li><a class="changeview" href="#add">Add New</a></li>
</ul>
</div>
<div id="alltasks" class="view">
<h1 class="fancy">Chris Hughes All Tasks</h1>
<ul id="tasklist">
</ul>
</div>
<div id="add" class="view">
<h1 class="fancy">Chris Hughes Create Task</h1>
<div id="errors"></div>
<form id="taskentry">
<ul>
<li><input type="text" minlength="2" class="required" name="task[name]" id="taskname" placeholder="Task Name" value=""/></li>
<li>
<textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
</li>
<li><input type="text" class="required date" name="task[due]" id="taskdue" placeholder="Task Due" value="" /></li>
<li class="naked"><input type="submit" name="Save" /></li>
</ul>
</form>
</div>
</body>
</html>
Try this selector:
.task-actions li.right a.task-complete {
color: blue;
}
Try to do not use !important but find where color is overwritten. Open Your Chrome console and check where color:blue is overwritten for this element.
... or put You script on bottom of all CSS ( but this is not good solution )
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.
i use FontAwsome icon to put it in a login form, so a user and password icon appear when user enter the sign in form.
the form work correctly with chrome: http://im85.gulfup.com/4Q9sj9.png
but icons appear likes this in firefox: http://im79.gulfup.com/WFKCvm.png
html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/flatly/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
</head>
<body>
<div id="bg">
<img src="login-image.jpg" alt="login screen background">
</div>
<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="checklogin.php">
<fieldset>
<div class="form-group">
<span class="usericon">
<input class="form-control" placeholder="Username" name="username" type="text" autofocus>
</span>
</div>
<div class="form-group">
<span class="passwordicon">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</span>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input type="submit" name="Login" value="Login" class="btn btn-lg btn-success btn-block">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>
css code for icon: icon.css
.usericon input{
padding-left:25px;
}
.usericon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f007";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
.passwordicon input{
padding-left:25px;
}
.passwordicon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f023";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
aslo when i try to change the css code using developer tools or even from the css file nothing changed in firefox, that somehow strange!
anyone know how can i solve this problem?
I think it's a bad idea to break the FontAwesome encapsulation the way your rules do. You can position the conventional <i> elements and get the result you want:
<span class=usericon>
<i class="fa fa-user"></i>
<input>
</span>
Simplified from yours, but the same idea. The CSS:
.usericon {
padding: 1px 5px;
position: relative;
display: inline-block;
}
.usericon i {
position: absolute;
top: 4px; left: 10px;
}
.usericon input {
border: 1px solid #bbb;
border-radius: 5px;
padding: 2px 2px 2px 20px;
width: 15em;
}
Here's the CodePen for it. That looks fine to me in both Firefox and Chrome.