Body width is 299px when I inspect it … but actually it is 150 px . What’s wrong ?
Why body element is not taking all the width?
Hello there,
We cannot help much with a screenshot.
While we are primarily here to help people with their
Free Code Camp
progress, we are open to people on other paths, too.
Some
of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at
https://www.freecodecamp.org/learn
.
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding
My CSS code working differently in chrome and firefox. I don’t know exactly what and where the problem is
. I’m trying to make a portfolio page, I’ve made a pretty good section of it so far , but now it’s time for media queries , it’s working differently in firefox and chrome . In chrome , when I’m reducing the width of widow below 400px using device toolbar, body element gets shrink , I don’t know why . As far as I know body’s width is always equal to the max -size of window . It’s not shrinking in chrome .
I’ve been messing with it since last 6-7 hours …still not getting where and what the problem is. I don’t know how to explain my problem.
Sky020:
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
It is
very
difficult to debug someone else’s code, if they do not provide it…
I’m making a portfolio page. I’m attaching my codes of particular section. Everything is working fine so far , the problem here is when I am decreasing the width of my window using chrome dev tool’s device toolbar, the width of
body
element gets shrinked, it’s not 100% width anymore , so everything gets shrinked so style gets bad. This behaviour is not with firefox. SO what’s the problem?
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shubham Porfolio</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<header class="header">
<div class="header-wrap">
<img src="https://i.ibb.co/FsCtFBx/logo.png" alt="shubham">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</header>
<section class="intro">
<img src="https://i.ibb.co/FsCtFBx/logo.png">
<h1>Hi, I am <strong>Bert Baxter</strong></h1>
<p class="sub-heading">
front-end-dev
</section>
</html>
<style>
:root {
--main-color: rgb(0, 237, 189);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: poppins;
/**************************************************/
.header {
position: fixed;
background: white;
width: 100%;
z-index: 3;
top: 0;
header .header-wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: auto;
header img {
height: 80px;
header ul {
list-style: none;
display: flex;
justify-content: space-evenly;
flex: 1;
height: 70%;
align-items: center;
header nav {
flex-basis: 50%;
align-self: stretch;
display: flex;
align-items: center;
header a {
text-decoration: none;
color: black;
header li {
transition: transform, border-bottom, 200ms;
header li:hover {
border-bottom: 3px solid var(--main-color);
transform: translateY(-5px);
cursor: pointer;
@media (max-width: 700px) {
header nav {
display: none;
header img {
margin: auto;
/******************************************************************/
/********************INTRO_SECTION********************************/
section.intro {
display: grid;
grid-column-gap: 1em;
width: min-content;
margin: auto;
grid-template-columns: min-content max-content;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"image heading"
"image sub-heading";
padding-top: 120px;
section.intro img {
display: block;
width: 280px;
grid-area: image;
z-index: 2;
box-shadow: 0 0 10px grey, 0 0 12px grey;
section.intro h1 {
grid-area: heading;
font-weight: 100;
font-size: 2.5em;
section.intro p {
grid-area: sub-heading;
font-size: 1.5em;
background: var(--main-color);
height: min-content;
grid-column: 1/3;
text-align: right;
position: relative;
left: -2em;
width: calc(100% + 2em);
padding-right: 1em;
section.intro strong {
display: block;
@media (max-width: 500px){
section.intro{
width: 95%;
display: flex;
flex-flow: column wrap;
padding-top: 100px;
section.intro img{
order: 3;
width: 90%;
min-width: 275px;
section.intro h1{
section.intro p{
width: 90%;
position: unset;
text-align: left;
padding-left: 20px;
min-width: 275px;
margin-top: 20px;
margin-bottom: 20px;
</style>
