I am having a few issues with the Google Chrome browser and Bootstrap.
I have a container inside of one of my HTML sections that is
centering content in every browser except for Google Chrome.
It appears to be behaving as if it is a container-fluid because
it is not spanning 100% of the viewport window, it appears to have
about 5px of margin on the left and right side. Again, only in
Chrome.
Here is my Code for just that section:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hD djZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300italic,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="aboutUs">
<div class ="groupImg">
<div class="container">
<h1>About Us</h1>
<p class = "motto col-md-12"><i>
“As a multicultural dance company, C.O.D.A. prides itself in the versatility of dance styles and creative ideas within the company. Understanding the authenticity and history of Hip Hop, we embrace all styles including street, footworking, house, breakdancing, popping, locking, tutting, freestyling, new school, old school and more. With dancers that come from both trained and untrained backgrounds, we can appreciate the possession of raw talent and acknowledge the importance of discipline and training. C.O.D.A. aims to share the common interest of Hip Hop to all people and to demonstrate a mutual understanding and respect for other dancers alike.”</i>
</p>
</div>
</div>
</section>
</body>
</html>
CSS:
#aboutUs h1 {
color:white;
font-size:40px;
padding: 40px 0px 20px 0px;
text-align: center;
text-transform: uppercase;
}
.motto{
color:white;
font-size:20px;
font-weight: 300;
line-height: 2.0em;
text-align: center;
}
.groupImg {
background-image: url("img/5color_maroon.jpg");
background-size: 100%;
background-repeat: no-repeat;
height: 750px;
}
Here are screenshots in each browser:
Here is what it looks like in Chrome
Here is what it looks like in Safari
Here is what it looks like in Firefox
Didn't I have linked it correctly or am I missing something?
Thanks!
Please replace your CDN reference, with current CDN code. you may use <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> its working. or may be your main.css is having any mistake.
Related
I have been trying to apply padding and colour to my body element and it is not applying.
I have been on this and it is not working. I am using live server for my work though, I will apply my code below for review. both the css and the html. it should also be noted that I am using SASS. Thanks
body {
font-family: 'lato', sans-serif;
font-weight: 400;
//font-size: 16px;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<title>A7A ASSOCIATES LTD</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/A7A Logo.png" alt="logo" class="header__logo">
</div>
<nav></nav>
</header>
</body>
</html>
Why would you place those CSS rules after the HTML closing tag ?
anyway, here are few solutions:
put the CSS style inside css/style.css file and it shall work.
make sure the path to the CSS file is correct.
clear the browser cache and try again (CTRL+F5 for Firefox, Shift+F5 for chrome)
The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn't work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn't work.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
Css code:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: hsl(0, 0%, 98%);
text-rendering: optimizeLegibility;
}
.container {
width: 60%;
height: 60%;
}
For the folder structure please refer to this
https://github.com/swethalakshmi22/four-card-feature-section
The code you have uploaded on Github it has href="/style.css" please write
here your code in the question is fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?
I set the font-size in the HTML root element, to use rem units in the project. After that, I couldn't apply any styles on the body element. The inspector shows that it's using the user agent default stylesheet. The other styles do apply, but the body element is completely broken.
It's the same in Chrome, Firefox and Safari. Also the font-family, color, padding etc. are all broken.
If needed you can download the project via this link.
If I comment out the * and HTML selectors, the padding, font-family is back, but the rems are incorrect because of the default 16px font-size.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours</title>
</head>
<body>
<header class="header">
<div class="logo-container">
<img src="./img/logo-white.png" class="logo" alt="natours logo">
</div>
<div class="heading-container">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
How can i set correctly the root font-size to use rems? What causes this problem?
This is very strange. I copied, opened, closed the file like ten times. Then deleted (not commented) out the html selector and just rewrote it again. This fixed the issue. I have never seen anything like this before.
I'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!
mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.
I am having trouble using the first- and last-child pseudo classes in my Bootstrap/Sass code. Basically, I am looking to create a whole bunch of blank space above/below the first and last header only. Compass is running, and it's not giving me an error, but when I hard refresh my page in the browser nothing changes. Here is my code, CSS first:
$headings-small-color: black;
#import "bootstrap-compass";
#import "bootstrap-variables";
#import "bootstrap";
h1 {
font-family: 'Almendra SC', serif;
}
h1:first-child, h1:last-child {
margin-top: 200 px;
}
small {
font-family: 'Fanwood text', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cat Graveyard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stylesheets/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
<h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
<h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I do realize that the more appropriate "Sassy" way would be to use a variable for these pseudo classes (and if you would like to give me an example, that'd be okay with me!), but right now my goal is just to get it to work.
I'm assuming my issue has to do with specificity re: Bootstrap. I'm at a loss of how to fix this, however. In the CSS generated by Compass, the CSS I wrote for the pseudo classes appear last. But, when I "inspect element" in the browser it shows the bootstrap CSS overriding the CSS I wrote.
IDK what to do at this point, any insight would be greatly appreciated!
Just a little typo
h1:first-child, h1:last-child {
margin-top: 200 px;
}
should be
h1:first-child, h1:last-child {
margin-top: 200px;
}