search

ByteGrad / Professional-CSS-Course

This repo contains everything you need as a student of the Professional CSS Course by ByteGrad
https://bytegrad.com/courses/professional-css
61 stars 40 forks source link

Small Header Issue #2

Closed ronnieross711 closed 2 years ago

ronnieross711 commented 2 years ago

Class is great and everything has gone smoothly and I am learning a lot. The only issue I am having is that the header doesn't span the entirety of the web page. I have looked and looked and looked for the problem. Could be a simple typo and I just can't find it. But I have no issues in my console so it appears that everything is working. It's like google chrome doesn't like the background-image linear gradient in the .header tag. Thanks in advance for your help.

/----html----/

`<!DOCTYPE html>

SocialEditor -- Simple editor to create and publish social media posts
© 2050 SocialEditor. All rights reserved.

Images

Uploaded image Uploaded image Uploaded image Uploaded image Uploaded image
Facebook posts Happy-hour-friday
Background image Foreground image
` /*----CSS----*/ `/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } /* take away default boarders and background of css for all buttons */ button { border: initial; background-color: initial; color: inherit; /* All buttons will inherit the .app color and font*/ font: inherit; outline: none; /* make sure there is a visual indicator for focus state */ } /* KEYFRAMES */ /* The keyframes is the animation that is happening to the navbar/header */ @keyframes fade-in-from-top { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes fade-in-from-left { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* BASE STYLES */ .app { font-family: 'Lato', sans-serif; font-size: 15px; color: #fff; height: 100vh; width: 100vh; } .app__container { height: calc(100vh - 55px); display: flex; } /* STYLES */ .header { background-image: linear-gradient(to right, #18A0BE, #622DB9); height: 55px; display: flex; /* creates a flex container for everything in header */ } .logo { align-self: center; margin-left: 20px; margin-right: 30px; animation: fade-in-from-top 0.5s; } .dd-toggle { color: rgba(255, 255, 255, 0.7); padding: 0 13px; cursor: pointer; transition: all 0.4s; animation: fade-in-from-top 0.5s; } .dd-toggle:hover { color: #fff; background-color: rgba(255, 255, 255, 0.07); } .dd-toggle:focus { color: #fff; background-color: rgba(255, 255, 255, 0.07); } .dd-toggle:nth-of-type(4) { margin-left: auto; } .dd-toggle:Last-child { display: flex; align-items: center; } .dd-toggle__icon { } .dd-toggle__img { height: 30px; width: 30px; object-fit: cover; /* Best practice for images so the image isn't distorted*/ border-radius: 50%; margin-right: 7px; } .dd-toggle__text { } /* SIDEBAR */ .sidebar { background-color: #10171A; width: 75px; display: flex; flex-direction: column; } .menu { } .menu__button { padding: 19px 0; color: rgba(255, 255, 255, 0.4); display: flex; flex-direction: column; align-items: center; width: 100%; transition: all 0.4s; animation: fade-in-from-left 0.5s; } .menu__button:hover { background-color: #2B363B; color: #fff; cursor: pointer; } .menu__button:focus { background-color: #2B363B; color: #fff; cursor: pointer; } .menu__button--active { background-color: #2B363B; color: #fff; position: relative; } .menu__button--active::before { content: ''; width: 3px; height: 100%; background-color: #375BB6; position: absolute; left: 0; top: 0; } .menu__icon { font-size: 18px; margin-bottom: 3px; } .menu__text { font-weight: 500; font-size: 12px; } .footer { margin-top: auto; margin-bottom: 60px; transform: rotate(-90deg); } .copyright { color: rgba(255, 255, 255, 0.15); font-size: 12px; white-space: nowrap; } /* PANEL */ .panel { background-color: #2B363C; width: 350px; padding: 15px 31px; } .panel__top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #4b5155; padding-bottom: 12px; } .first-heading { font-size: 18px; font-weight: 400; } .panel__collapse-icon { color: #6b7276; cursor: pointer; } .panel__images { padding: 25px 0; display: flex; flex-wrap: wrap; gap: 8px; /* creates space between the rows and gaps */ } .panel__img { width: 140px; height: 140px; object-fit: cover; /* good practice for images so images don't distort after adding width and height */ border-radius: 7px; cursor: pointer; transition: all 0.2s; animation: fade-in 1s; } .panel__img:nth-child(2) { animation: fade-in 1s 0.1s backwards; } .panel__img:nth-child(3) { animation: fade-in 1s 0.2s backwards; } .panel__img:nth-child(4) { animation: fade-in 1s 0.3s backwards; } .panel__img:hover { transform: scale(1.05); } .panel__btn { width: 140px; height: 140px; border-radius: 7px; background-color: #333e44; cursor: pointer; transition: all 0.2s; animation: fade-in 1s 0.5s backwards; } .panel__btn:hover, .panel__btn:focus { background-color: #404c52; } .panel__upload-icon { font-size: 25px; color: #21292d; } /* MAIN CONTENT */ .main { background-color: #EDF1F3; flex: 1; } .info-bar { height: 50px; background-color: #fff; border-bottom: 1px solid #D6DDE1; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; } .breadcrumbs { text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; } .breadcrumbs__link { color: #A6ADB1; text-decoration: none; } .breadcrumbs__icon { color: #A6ADB1; margin: 0 13px; } .breadcrumbs__name { color: #2E3335; font-weight: 500; } .button { background-color: #375BB6; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 8px 20px; cursor: pointer; border-radius: 500px; transition: all 0.4s; } .button:hover, button:focus { background-color: #26438D; } .artboard { height: calc(100vh - 50px - 55px); display: flex; justify-content: center; align-items: center; margin-top: -25px; column-gap: 20px; } .canvas { height: 57.5vh; /* viewPort hieght */ width: 48.6vw; /* viewPort width */ position: relative; border: 1px solid #fff; border-radius: 3px; } .canvas__bg-img { height: 100%; width: 100%; object-fit: cover; opacity: 0.15; } .canvas__fg-img { height: 75%; width: 78%; object-fit: cover; border-radius: 3px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* -50% makes the image relative to its own size */ border: 1px solid #fff; cursor: grab; } .canvas__cirlce { height: 15px; width: 15px; border-radius: 50%; background-color: #fff; position: absolute; } .canvas__cirlce:nth-of-type(1) { top: 11.5%; left: 10.4%; cursor: nw-resize; } .canvas__cirlce:nth-of-type(2) { top: 11.5%; right: 10.4%; cursor: sw-resize; } .canvas__cirlce:nth-of-type(3) { bottom: 11.5%; left: 10.4%; cursor: nw-resize; } .canvas__cirlce:nth-of-type(4) { bottom: 11.5%; right: 10.4%; cursor: sw-resize; } .tools { height: 57.5vh; display: flex; flex-direction: column; } .tool { background-color: #E1E6E9; height: 44px; width: 44px; border-radius: 8px; color: #404446; cursor: pointer; } .tool--active { background-color: #2B636B; color: #fff; } .tool:Last-child { margin-top: auto; } .tool__icon { }`
ronnieross711 commented 2 years ago

scrrenshot-pdf.pdf

ByteGrad commented 2 years ago

Hi Ronnie,

I just copy-pasted your code in my editor to try it out and the header seems to stretch all the way. It looks just like it is supposed to on my screen. I did have to add the html, body, tags etc. but I'm assuming you do have those.

Looking at your screenshot, there seems to be another issue on the right side as well as the rest is not taking up any space over there either.

Probably best to simply copy+paste all the final code of the video where you are stuck at. Every video has a folder with the complete final code in this repository.

ronnieross711 commented 2 years ago

Cool man thank you. Yea I tried that and it obviously worked. I just didn’t know if it was something on my end. I’m going to try a hard restart of my computer and see if that changes anything. Really you’re teaching me concepts about CSS so as long as I understand what you’re teaching that’s all that matters.

On Wed, Dec 22, 2021 at 2:56 PM ByteGrad @.***> wrote:

Hi Ronnie,

I just copy-pasted your code in my editor to try it out and the header seems to stretch all the way. It looks just like it is supposed to on my screen.

There seems to be another issue on the right side as well as the rest is not taking up any space over there either.

Probably best to simply copy+paste all the final code of the video where you are stuck at. Every video has a folder with the complete final code in this repository.

— Reply to this email directly, view it on GitHub https://github.com/ByteGrad/CSS-Course/issues/2#issuecomment-999875272, or unsubscribe https://github.com/notifications/unsubscribe-auth/APAN3GPMP5IJYEYKXNRR5TTUSI3Q7ANCNFSM5KTHOPSA . You are receiving this because you authored the thread.Message ID: @.***>

ByteGrad commented 2 years ago

Yeah can be unsatisfying not knowing what caused the problem. I do a deep dive if it's a problem that happens multiple times, otherwise I just accept I'm not going to know the exact cause every time and move on.