hello!
How can i fix the style of the images?
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="header">
This file has been truncated. show original
style.css
*{
border:1px solid black;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.container {
This file has been truncated. show original
use col-md-4
, not col-md-3
. Each row has 12 cols, so 3xcol-md-4 covers the full width of the row
It worked! thanks! Do i need to create a new topic to ask something in this project?
If its still this project, no, just post it in this topic
I try to create the footer but i missing something with the divs. When i add the footer content; it aooears above the cards div. Do you see something that i don’t?
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="header">
This file has been truncated. show original
style.css
*{
}
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.container {
max-width: 980px;
This file has been truncated. show original
both your cards and footer are missing div.row:
<div class="cards">
<div class="container">
<h2>Our Expertise</h2>
<!-- missing div with class row -->
<div class="col-md-4">
see comment. Same for footer. Cols should always have row as parent
Thanks a lot. You’ re a magician!
col’s are using float
(you are familair with float?), anyway, the row
makes sure adding more cols will go below each other (by using clear
)
both clear and float are css property, they must have been taught at some point in the course
i’m somehow familiar but there are so many aspects to take care in html/css positioning.
So. do you suggest to set clear property at the css of .footer?
By the way. how can i align left the address attribute?
no, row
contains the clear property, its already defined for you, just add the rows, i was just adding some more explanation (which hopefully didn’t confuse you)
you could use float
but use bootstrap instead, add pull-left
class to <div class="col-md-4">
i use the pull-left class but doesn’t go left. do i need to style it i ncss with align/float?
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="header">
This file has been truncated. show original
style.css
*{
}
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.container {
max-width: 980px;
This file has been truncated. show original
i don’t understand, col’s have float: left, adding pull-left
add float: left !important
, it should be on the left…
did you run the code? Could it be a borwser fault? I use firefox.
the problem is in your cards
, row should be the parent of col-md-4:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
one row can contain multiply columns.
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="header">
This file has been truncated. show original
style.css
*{
}
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.container {
max-width: 980px;
This file has been truncated. show original
like this?
the problem was in your div.cards
, not your div.footer
, sometimes mistakes earlier in the code can cause output issues later
ok! i’ll check it!!
thanks a lot for your time
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="header">
This file has been truncated. show original
style.css
*{
}
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.container {
max-width: 980px;
This file has been truncated. show original
I made it. The only problem is how can i fix the different positions throught smaller screens through the @media queries.
why use @media
when you have bootstrap? use col-xs
and col-sm
see here
it was by default in to my code