I’m trying to do an animation of the logo in my PHP website. I need to break the two words of the logo into separate spans. I wanted to get rid of the whitespace between the two span tags so I started looking for an answer…and found a problem. Basically, when I add an ID to each span tag, even if I replicate the styling for both IDs, or I add a new text color, it doesn’t work. It’s almost like the IDs do not work. The span tags are inside of an tag with an ID that does have the correct formatting, which I did try erasing and even then it doesn’t work. The only way to make it work, is to duplicate the ID and that is a bad practice. I’m attaching a jsfiddle and where everything works, but on my file it doesn’t.
EDIT
The only reason why I’m duplicating an ID is because it is the only way to style that text. It doesn’t matter if I use a new class or two new IDs, they just don’t work. It’s as if they do not exist in the code. I think the a tag’s ID is taking prominence over the new span IDs, but even if I remove it, it doesn’t work.
I edited to include the new tags that do not reflect the changes. #unexpected and #friends have the styling color: blue; and it just doesn’t show on the browser.
* {
font-family: Montserrat, Helvetica, sans-serif;
color: #828282;
}
@font-face {
font-family: "Riffic";
src: url(../Riffic.ttf);
src: url(../Riffic/rifficfree-bold-webfont.woff);
}
@keyframes logo{
}
body {
padding-top: 65px;
position: relative;
}
#navbar {
background: #FF9D9D;
}
#navbarBrand{
font-family: 'Riffic', sans-serif;
color: white;
font-size: 26px;
}
#unexpected, #friends {
color: blue;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,1);
}
.navbar-dark .navbar-toggler {
color: rgba(255,255,255,1);
border: solid 2px rgba(255,255,255,.5);
}
.btn-outline-light:hover {
color: #FF9D9D;
}
a.btn.btn-outline-light.waysToHelp:active {
color: #FF9D9D;
}
.waysToHelp {
margin-left: 10px;
}
.waysToHelp:hover {
color: #FF9D9D;
}
#mainImage {
padding-bottom: 100px;
}
section {
padding: 58px 0 80px;
}
h1 {
color: #FF9D9D;
padding: 10px 0 25px;
}
h2 {
color: #FF9D9D;
padding: 10px 0 25px;
}
figure {
max-width: 435px;
}
#figCaption {
color: #FF9D9D;
font-weight: 500;
font-style: italic;
}
#projectCol {
margin-top: 100px;
}
#message {
color: #828282;
}
#submit {
padding: 8px 50px;
background-color: #FF9D9D;
border: none;
}
.small-text {
color: #FF9D9D;
}
footer {
padding: 20px;
}
footer a {
color: #FF9D9D;
}
#heart {
color: #FF9D9D;
}
@media only screen and (max-width: 767px) {
#mainImage{
padding-bottom: 50px;
}
section {
padding: 15px 0 20px;
}
img {
padding-bottom: 15px;
}
h2{
margin-top: -70px;
}
#figure1 {
display: block;
margin: 0 auto;
}
#figure2 {
display: block;
margin: 0 auto;
}
#figure3 {
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 767px) and (max-width: 1029px) {
img {
padding-bottom: 15px;
}
} <!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"><!-- it tells the browser it's a responsove site and it makes the viewport, which is the screen size, to look for the device's width -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Unexpected Friends - Bootstrap</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--all the above tells IE9 or lower to upload those scripts because you are not very smart and it'll help you-->
</head>
<body data-spy="scroll" data-target="#navbar">
<nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
<a class="navbar-brand" href="index.php" id="navbarBrand">
<span class="navbar-brand" id="unexpected">Unexpected</span><span class="navbar-brand" id="friends">Friends</span>
</a>
<!--navbar toggler is the hamburger icon that appears when in smaller screens-->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<!--ml-auto moves the links to the right-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-light waysToHelp" href="#waysToHelp">Ways To Help</a>
</li>
</ul>
</div><!--navbarNav-->
</nav>https://jsfiddle.net/HailToTheV612/4qbeh216/6/
The first image is of the code not working in the php file.
The second image is the code working if I duplicate the a tag’s #navbarBrand ID styling:
Advertisement
Answer
I edited to include the new tags that do not reflect the changes. #unexpected and #friends have the styling color: blue; and it just doesn’t show on the browser.
It looks like your code is working on your posted snippet (i.e., the #unexpected and #friends styling). The reason why it could not be showing on your browser is that, the browser is fetching the cached old CSS files. To refresh the cache, simply use ctrl+F5 or use an incognito browser. In addition, check if you’ve included the CSS file in your project.