In the code given below, i want to display the font-size property on the class: flip-menu-main-icon but which is overridden by font-size property on class fa.
how can I solve this problem?
HTML Code:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.flip-menu-main-icon {
/* margin-left: 10%; */
font-size: 18px;
float: none;
line-height: 2.5rem;
margin-right: 0;
margin-left: 0;
position: relative;
top: 0;
min-width: 1.5rem;
list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span>
use this class
.fa.flip-menu-main-icon {
font-size: 29px;
}
I think you might not be using external css.
Please find the code below:
HTML- index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span>
</body>
</html>
CSS - custom.css
.flip-menu-main-icon {
/* margin-left: 10%; */
font-size: 18px;
float: none;
line-height: 2.5rem;
margin-right: 0;
margin-left: 0;
position: relative;
top: 0;
min-width: 1.5rem;
list-style-type: none;
}
Hope this solves your problem
Related
So I'm working on a website and I wanted to try including bootstrap in it. I've used the navbar tags and some custom CSS but I can't remove the margin. So basically the navbar looks weird because of it.
Heres the code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hilo | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<body class="body-fr">
<nav class="navbar" role="navigation">
<div class="container-fluid nav-container-fr">
<ul class="nav-nav">
<li class="nav-item-fr">Home</li>
<li class="nav-item-fr">Streams</li>
<li class="nav-item-fr">Followed</li>
<li class="nav-item-fr nav-icon-fr"><i class="lnr lnr-user fs-40"></i></li>
<li class="nav-item-fr nav-cog-fr"><i class="lnr lnr-cog fs-40"></i></li>
</ul>
</div>
</nav>
</body>
</html>
Css:
* {
margin: 0;
padding: 0;
}
.body-fr {
background-color: #333;
}
nav {
margin: 0;
padding: 0;
width: 100%;
}
.navbar {
margin: 0px;
padding: 0px;
}
.nav-container-fr {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
background-color: #222;
}
.nav-nav {
justify-content: space-around;
list-style-type: none;
list-style: none;
display: inline;
margin: auto;
margin-bottom: 5px;
}
.nav-size {
font-size: 30px;
}
.nav-item-fr {
text-align: center;
display: inline-flex;
margin: 0 30px;
}
.nav-icon-fr {
margin-top: 5px;
margin-left: 470px;
margin-right: -40px;
}
.nav-cog-fr {
margin-right: -50px;
}
.fs-20 {
font-size: 20px;
}
.fs-40 {
font-size: 40px;
}
.fs-60 {
font-size: 60px;
}
.fs-80 {
font-size: 80px;
}
.fs-100 {
font-size: 100px;
}
.fs-120 {
font-size: 120px;
}
Can I please get some help?
And please ignore my messy code I'm still new t bootstrap and I don't really feel like fixing the CSS right now.
You could try setting:
margin: 0 !important;
Or you could get more specific with the selector.
If you are in Chrome for instance, and right click on the element in question, you should see that it has a more specific selector.
Just as an example:
html body nav {
margin: 20px;
}
Is more specific than:
nav {
margin: 0;
}
So a margin of 20px would be applied in this case.
This is the image i am a learner in html and css this is my first project and i have been battling with a particular problem about buttons on the main page i created the link and name for the buttons when it got to the button layout for designing the button the layout went sideways and i have tried everything i had known
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
width: 1140px;
margin: 0 auto;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size:cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin: 0;
color: #fff;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn {
display: inline-block;
margin: 1em 0;
padding:1em 1.5em;
background-color: #404040;
color:#fff;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box" >
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html>
]2
Was this something you had in mind?
I removed .row (not needed) and .hero-text-box (messed up the design with a fixed width). I placed .hero-text-box in the middle with display: flex on header instead. I also added a padding to header that changes depending on the screen width.
You can see the rest of the changes in the code below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/*.row {
width: 1140px;
margin: 0 auto;
}*/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://i.picsum.photos/id/835/300/200.jpg");
background-size:cover;
background-position: center;
height: 100vh;
/* added new code below */
display: flex;
flex-direction: column;
justify-content: center;
padding: 5vw;
}
/*.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}*/
h1 {
margin: 0;
margin-bottom: 1.5rem; /* added this line */
color: #fff;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn {
display: inline-block;
margin-right: 1rem; /* changed this line */
padding: 1em 1.5em; /* changed this line */
background-color: #404040;
color:#fff;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box" >
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html>
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>
I'm making a very basic website, but can't remove the extra top space over the body element. It looks like this in both Chrome and Firefox:
I've tried most relevant solutions I found on this forum: I reset my body and HTML margin and padding to 0. Also, I made sure there are no children elements with top margins messing with my code.
body, html {
margin: 0px;
padding: 0px;
}
.navbar {
background:#312c2a;
height: 30px;
text-align:center;
}
.navbar li {
display: inline-block;
margin-right:20px;
margin-left:20px;
}
.navbar a {
color: white;
font-size:20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
This is my HTML code. I really can't find any problem. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
Many browsers give unordered lists a default top and bottom margin. You should add:
ul {
margin: 0;
padding: 0;
}
Demo Snippet:
body,
html,
ul {
margin: 0;
padding: 0;
}
.navbar {
background: #312c2a;
height: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
margin-right: 20px;
margin-left: 20px;
}
.navbar a {
color: white;
font-size: 20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
try this :)
.navbar {
width: 100%;
height: 70px;
background: black;
margin-left: auto;
margin-right: auto;
position: fixed; /*fixed, relative, or absolute like you want*/
top: 0px;
z-index: 200;
}
ul {
margin: 0;
padding: 0;
}
and
.body{
margin: 0;
padding: 0;
background-color:white;
}
I am using the polymer paper-slider in my application, however, it always stays stuck in the initial position and does not drag on user action. The progress bar is also not visible. It looks like the following at the moment :
I am using the following code for this :
<!doctype html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="components/paper-button/paper-button.html">
<link rel="import" href="components/paper-slider/paper-slider.html">
<style shim-shadowdom>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
paper-slider{
width:800px;
}
core-toolbar {
background: #03a9f4;
color: white;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
.container {
width: 80%;
margin: 50px auto;
}
paper-button[raised].colored {
background: #03a9f4;
color: white;
margin-top: 30px;
text-align: center;
vertical-align: middle;
}
.slider-markers, #sliderBar, #sliderKnob {
-webkit-user-select: none;
-webkit-user-drag: none;
}
paper-slider::shadow #sliderKnobInner
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderKnobInner::before
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<core-header-panel flex mode="normal">
<core-toolbar>
<span flex>Flow</span>
</core-toolbar>
<div class="container" layout vertical center>
<post-card>
<img width="70" height="70"
src="../images/venturimeter.jpg">
<h2>Venturimeter</h2>
<br/>
<div>In order to</div>
<br/><br/>
<paper-slider pin value="50"></paper-slider>
<br/><br/>
</post-card>
<paper-button span raised class="colored" onclick="window.open('Page3.html','_parent');" layout center horizontal>Next</paper-button>
</core-header-panel>
</body>
</html>
What is the mistake I am making here? How do I fix this ?
Thanks !