I'm building a movies site using an api.
Whe I link the css styles nothing appears to be working. Not even background color. Also i'm trying to add flex also that one is not working. Is there some problem in the linking?
It's my first question on this site and i'm still learning html and css.
#import url('https://googleapis.com/css2?family=Poppins:wght#200;400&display=swap');
:root {
--primary-color;
#22254b;
--secondary-color;
#373b69;
}
* {
box-sizing: border-box;
}
body {
background-color: purple;
font-family: 'Poppins', sans-serif;
margin: 0;
}
header {
padding: 1rem;
display: flex;
justify-content: flex-end;
}
.search {
background-color: transparent;
border: 2px solid;
border-radius: 50px;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
color: #fff;
}
.search :placeholder {
color: #7378c5;
}
.search :focus {
outline: none;
}
main {
display: flex;
flex-wrap: wrap;
}
.movie {
width: 300px;
margin: 1rem;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
border-radius: 3px;
}
.movie img {
width: 100%;
}
There are two ways to include a stylesheet:
Approach 1, using #import:
<style>
#import url("./path/to/styles.css")
</style>
If you are using #import make sure that it's at the top of the style block.
Approach 2, using <link />:
<head>
<link href="./path/to/styles.css" rel="stylesheet"/>
</head>
Related
still keeping some vertical space while list-style: none is defined.
https://product-landing-page.freecodecamp.rocks/#how-it-works
If you check this project and scroll to pricing labels there is defined exactly like mine and it behave differently.
My price label:
Project's label
MY CSS:
/* ========== PRICE ======= */
#cost {
display: flex;
flex-direction: row;
justify-content: center;
}
.price-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.lvl {
background-color: #dddddd;
text-align: center;
font-size: 1.4em;
color: rgb(65, 65, 65);
padding: 5px;
width: 100%;
}
#cost ol li {
padding: 5px 0;
margin: 0;
}
li {
list-style: none;
}
Project's CSS:
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
Maybe someone can explain it to me so i can understand what is happening here
If you look at all the CSS that is being applied to that ol element you'll notice that there is a setting of everything (*) which includes padding: 0;
This overrides the browser's default settings for padding related to ol elements.
You may or may not want to set padding: 0 for everything at the start. It depends on your precise use case.
As in the case of the site you reference, something like this can be seen at the top of some stylesheets - meaning the author will add any padding and margin settings themselves rather than relying on default browser settings.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[The box-sizing setting means e.g. padding and border dimensions are included in the dimensions of the element].
If you don't want such a global approach to unsetting padding then put the padding: 0 in the style setting for the ol element itself. For example: [I can't tell exactly what this should be as I don't know your HTML stucture]
#cost ol {
padding: 0;
}
Just add padding: 0
ul, ol {
list-style:none;
padding:0;
}
I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window, in around 1200px width, the flex box container is not going all the way down. I am fine with the buttons coming as a column when viewing on a small screen, as already happening.
what I want to happen
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: relative;
left: 0;
right: 0;
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration:0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration:0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px){
.flex-container>button{
margin: 7%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Papers</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600&family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/css/styles.css">
</head>
<body>
<div class="heading">
<h1>Loren ipsum</h1>
</div>
<hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
<div class="flex-container">
<button>1Year</button>
<button>2Year</button>
<button>3Year</button>
<button>4Year</button>
</div>
</body>
</html>
If you make the styling of the flex-container:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Then it will certainly cover the whole page.
I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.
Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.
A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/
Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
height: 100vh; /* here's the change*/
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration: 0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px) {
.flex-container>button {
margin: 7%;
}
}
<div class="heading">
<h1>Hello World!</h1>
</div>
<div class="flex-container">
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
</div>
https://jsfiddle.net/slingtruchoice/56e0sj4k/
I have this simple html with a button:
body {
background-color: White;
font-family: 'Roboto', sans-serif;
width: 800px;
margin: 0 auto;
}
div.container_body_content {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
div.buttondiv {
width: 100%;
height: auto;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-color: #93d00f;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: Green;
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="container_body_content">
<div class="buttondiv">
<button class="button"><span style="color:White;font-family:'Roboto';font-weight:bold;">Test Button</span></button>
</div>
</div>
When I comment out width: 800px; margin: 0 auto; for body, the button works fine and changes background-color to green on hover.
However if I have width: 800px; margin: 0 auto; set for body, the button just simply does not work, meaning background-color does not change to green on hover.
What I need is for the button to have this on hover effect even when I reduce the body width.
I can not seem to figure out what is going on, what am I doing wrong? Thank you
Strangely enough in the snippet it works, but when I open it in Safari or Google Chrome, it does not, this is how it looks like on my side:
Mystery solved, I just found a rogue DIV which I had "laid" on top of my div.buttondiv. In the snippet it works, because I attached just a MWE and left out the problematic part of the code.
This is the part of CSS that caused my problem:
#bar-graph tbody tr {
height: 296px;
padding-top: 2px;
}
Thanks everyone for your insights
My CSS doesn't work with my React project, it only changes body (I changed the background color from white to black), the rest from .info isn't working at all. What am I doing wrong?
import React from 'react';
import styled from 'styled-components';
import styles from 'assets/css/CSS.module.css';
const Offer = () => (
<div>
<div className={'info'}>
<h1 className={'info__title'}>Pick a pricing plan</h1>
<p className={'info__description'}>
We did our best to meet your expectations.
Please feel free to pick the right plan for your needs.
Remember that in any moment you can switch your pricing plan.
</p>
</div>
<div className={'container'}>
<div className={'box'}>
<h2 className={'box__title'}>Basic</h2>
<p className={"box__description"}>
Everything you need. For a reasonable price.
</p>
<p className={"box__price"}>$29</p>
<button className={"box__button"}>choose</button>
</div>
<div className={"box box--featured"}>
<h2 className={"box__title"}>Pro</h2>
<p className={"box__description"}>
More than anyone can give – for less than anywhere else.
</p>
<p className={"box__price"}>$99</p>
<button className={"box__button"}>choose</button>
</div>
<div className={"box"}>
<h2 className={"box__title"}>VIP</h2>
<p className={"box__description"}>
Ok, we get it. You’re the boss now. Just tell us what you need.
</p>
<p className={"box__price"}>$429</p>
<button className={"box__button"}>choose</button>
</div>
</div>
</div>
);
const HomePage = () => (
<>
<div>
<Offer/>
</div>
</>
);
export default HomePage;
$dark: #171717;
$light: #ffffff;
$font-stack: 'Fira Code', sans-serif;
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: $font-stack;
background-color: $dark;
color: $light;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px 0 0;
}
.info {
text-align: center;
max-width: 700px;
margin-bottom: 60px;
&__title {
font-size: 45px;
}
&__description {
font-size: 18px;
}
}
.container {
display: grid;
max-width: 1000px;
align-items: center;
#media (min-width: 800px) {
grid-template-columns: repeat(3, 1fr);
}
}
.box {
min-height: 500px;
border: 5px solid $light;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 15%;
position: relative;
&:first-of-type {
right: -5px;
}
&:last-of-type {
left: -5px;
}
&__title,
&__price {
font-size: 45px;
font-weight: bold;
}
&__title {
margin: 0 0 20px;
}
&__price {
margin: 30px 0;
}
&__description {
font-size: 14px;
}
&__button {
background-color: $light;
padding: 8px 25px;
font-family: $font-stack;
font-weight: bold;
border: none;
}
&--featured {
background-color: $light;
color: $dark;
min-height: 550px;
box-shadow:
-20px 0 25px -15px rgba(255,255,255, .3),
20px 0 25px -15px rgba(255,255,255, .3);
&::before {
width: 95%;
height: 97%;
content: '';
position: absolute;
border: 5px solid $dark;
}
&::after {
top: 1.5%;
width: 40%;
min-width: 45px;
height: 30px;
content: 'most popular';
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
color: $light;
background-color: $dark;
position: absolute;
}
.box__title,
.box__price {
font-size: 60px;
}
.box__description {
font-size: 16px;
}
.box__button {
position: relative;
z-index: 10;
background-color: $dark;
color: $light;
font-size: 20px;
padding: 12px 28px;
}
}
}
I added the correct code, before that i started writing something else, but that doesnt matter now. details, details, details , details - just wrote this so i could edit.
I've changed css. to scss, imported scss. and installed sass, but the only thing that change is the body background to black
Use a relative path. Assuming HomePage.js is in components, the import should be import '../assets/css/CSS.module.css'
There are several problems in your original post.
1) jsx className syntax
Your JSX should look like this:
const Offer = () => (
<div className={'info'}>text</div>
...
See codeburst.io/styling-in-react.
2) Specify the correct import
Your path / filename for the stylesheet should be something like:
import '../../assets/css/CSS.module.css';
3) Add Sass to your project
Node-sass is a library that provides binding for Node. js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile . scss files to css
Here you can read more about node-sass.
Once you fixed your path, you need to make sure that sass is correctly interpreted. To make your css (sass syntax) work you need to do two things as css is not scss:
1) Rename your .css file to .scss (yarn will show an error then)
2) Run npm install node-sass (to install sass)
npm install node-sass and add it to your project by adding --save to the command.
For some reason when I put on the id "enterGame" position: absolute div disappears. Even if I add to body or html tag position: relative I still can't see the div.
Relevant code:
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue, pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
<script src="script.js"></script>
</body>
As soon as you add position: absolute it disappears because it doesn't have a width. Try setting width: 100vw and it appears again.
when you add absolute you need to give the div some width
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
position:relative;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
width:200px;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position:absolute;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>
You already have the answers, I'll give you the tool to deal with these kinds of problems, know it and you'll be able to solve the problem better yourself in the future, which is the Dev Tool- Inspector.
Now try inspecting the DOM, as you can see in the image below with the inspector (F12/Ctrl+Shift+I on Windows/Linux), it shows that the element #enterGame has the size of 0x173.846, then => either its height or width is 0.
If you ain't already know which number is width, which is height then you can try inspecting the neighbor h1, you'll see that it's 375x21, so it's obvious that 375 is the width, then => the #endterGame disappears is because it doesn't have the width. Now try adding width: 100% (like the answers above said) will solve the problem.
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: absolute;
width: 100%;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>