How do I recreate this line?
So I am currently trying to recreate websites to test my (awful) knowledege in CSS/HTML despite learning for months I wanted to know how I can recreate that line looking thing shown under the header
177 Replies
Try a
<hr/>.Alright, Let me try.
I just tried adding but see nothing
Oh I figured it out, Thank you!
Try a border bottom on the header element. You don't want extra markup in your html for decorations
Alright, I tried it and it worked perfectly
I have one more quick question, In the image I sent if you look closly at the line it looks like it has some sort of shadow that makes the header look like its popping out how would I recreate it?
On the header use a
box-shadow it should be very subtle. Try starting with box-shadow: 0 .25em 1em rgba(0 0 0/.25) and adjust the values as needed. The first value is X-offset, then Y-offset, then blur (not included but next value would be spread) then the colour of the shadowAlright, I'll attempt that.
Ok, I've managed to do it thanks to you.
Hey I have another question, If you notice the Logo its placed at the left side away from the border of the screen would this be done better using position: relative; Or margins?
Also, Why is it that the top of my page has some weird shadow? But the Starbucks doesnt have a shadow?
using margins is better
only use position relative/absolute if you want to remove it from the usual flow of the DOM
and make it float above other elements in a sense
I cannot see the shadow youre speaking about. You may need to remove margin from your body element. As for the logo, you can use margin or padding; i would put padding on the header element itself but theres many ways to approach it.
It peaks out on the top a bit becayse the blur(+spread) is over twice as large as the offset.
in the example before, there will be 0.5em of blur visable at the top. so decrease the blur, or increase the offset
other option is to clip it, but that could cause unforeseen issues (it will clip other things too. such as overflow/outlines/etc..), so be careful with it
the -10 em is the space the box-shadow gets below. other sides will be clipped
If the element is stuck to the top of the screen, it won't be an issue at all (it will fall outside the viewport. So indeed make sure you don't have margin on the body
If there is no spread value, it takes on the same value as the blur? So you have to explicitly define spread as 0 for there to be no spread ?
no, it will just be 0
but the blur starts from the point of the offset. so thats why it has to be under 2 times as large to keep it within
no the blur should be <= than twice as large as the offset
example
offset: 0.5rem, blur: 1rem is okay
offset: 0.25rem, blur: 1rem not
Oh I see . Neat, Iāve never had a use case where I had to notice that. Good to know, thank you
np
So OP change your box shadow to
box-shadow: 0 .25em .325em rgb(0 0 0 / 0.25); and make sure to clear margin on your body elementThank you all for the help! Didn't expect a simple question to make such a good topic for discussion
Hey I have another question, When it comes to styling for different screen sizes what are the sizes Im meant to use for
Mobile
Ipad
Monitor
Laptop
TV
Things like that, I've tried searching it up and get different answers so I don't really know the correct answer.
Or would I have to redesign for every device that inspect element shows me
You want your device to be responsive so it works at every size. If you find a breakpoint where it doesnt work, add a media query there to fix it but you should have MAX 3 media queries for sm/md size project. You definately dot need to add a breakpoint for every possible device size, that would be impossible to maintain. Mostly you want to put yur energy into making sure your design scales by using relative margins and padding, fluid text, and responsive containers. container queries can really help to make sure your components are looking at their parents size rather than the viewports size.
so what are the effective sizes I should target?
there is no right answer, besides you want it to work at all sizes, thats part of coding responsively. It depends on your unique design where the breakpoints are where text strings are getting too long/short where you may want to add a media-query.
You have any tips or (funny to say) any videos that helped you understand it if you did learn thru that?
many of KPs videos are about learning flex and grid and learning to code responsively. I believe theres also a free course that has a channel in this server let me find it. "Conquering Responsive Layouts"
https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts/233002-introduction/1007804-intro-why-the-course-is-formatted-in-this-way
Kevin Powell
Kevin Powell
Do you want to learn how to make some kick-ass websites? Between teaching in a physical classroom, my YouTube channel, and the premium courses available here, I teach people how to make the web, and how to make it look good while they are at it.
Thank you for all the help Hart!
Honestly, It's such a pain to do all this.
Yeah learning responsiveness can be challenging but once you get it down, it makes you so much quicker and less code.
One tidbit that helped me was the quote āhtml comes out of the box responsive. Itās with our css that we take away that responsiveness when manipulating properties. So if your design is not responsiveness, look through your code to see what you added to take away that functionality and look for another solution that accomplishes your goalsā
Could I send you the HTML code I have (it isnt that long) to see if you can do anything to help?
Currently, This is my HTML code
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dr.Pepper</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="DP-LOGO.png" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="Dr.Pepper Logo.png" class="logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Flavors</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col"> <h1>It's not just a drink it's <span class="Pepper">Dr.Pepper!</span></h1> <p>When we claim to be the best flavor of <span class="Soda">Soda</span>, we aren't lying; after all, we are doctors.</p> <a href="#" class="button">learn More</a> </div> <div class="RedStyleContainer"> <img src="Dr.Pepper Can.png" class="Soda-Can"> <a class="hover" href="https://www.facebook.com/DrPepper/" target="_blank"><img src="facebook.png" class="facebook Socials"></a> <a href="https://twitter.com/drpepper?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="twitter.png" class="twitter Socials"></a> <a href="https://www.instagram.com/drpepper/?hl=en" target="_blank"><img src="instagram.png" class="instagram Socials"></a> </div> <div class="Half-Circle"></div> </div> </body> </html>
<div class="col"> <h1>It's not just a drink it's <span class="Pepper">Dr.Pepper!</span></h1> <p>When we claim to be the best flavor of <span class="Soda">Soda</span>, we aren't lying; after all, we are doctors.</p> <a href="#" class="button">learn More</a> </div> <div class="RedStyleContainer"> <img src="Dr.Pepper Can.png" class="Soda-Can"> <a class="hover" href="https://www.facebook.com/DrPepper/" target="_blank"><img src="facebook.png" class="facebook Socials"></a> <a href="https://twitter.com/drpepper?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="twitter.png" class="twitter Socials"></a> <a href="https://www.instagram.com/drpepper/?hl=en" target="_blank"><img src="instagram.png" class="instagram Socials"></a> </div> <div class="Half-Circle"></div> </div> </body> </html>
Login ā¢ Instagram
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing around the world.
Can you out it into a codepen with your css? Css is where we muck up the responsiveness.
To be 100% honest with you I have no idea how to do that
https://codepen.io/
You sign up, create a new pen, copy your html and css into it, and send the link
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
Ohh alright, Thank you!
The code looks really bad on CodePen
it's missing like 3-4 icons
I just need to see the css to see what's keeping it from veing responsive. If you have it in a github repo that would work too. But the html isn't telling me anything about why it's not responsive bc remember it comes out of the box responsive
I do have GitHub but I already did it on CodePen
K I'll take a look
Thank you, Prepare to be dissapointed.
Also just to show you the entire thing is meant to look like this (excluding responsiveness)
It looks responsive to me unless you're below 320px (which I would just turn that media query into a maxwidth 600px, you don't need to cap it at 320px which is the smallest we need to design for bit you'll want to give it some wiggle room if you're going to do your media queries like that eg min-width:300px max-width:600px
Is it the soda cam image I dont have that is screwing with the responsiveness? Cam you screenshot where it's giving trouble, what it looks like?
The things your missin gon the website would be the Logo on top left as well as the Facebook, Twitter, instagram and Soda Can link
Overall I think it's the fact im doing responsiveness incorrectly overall
Adding fixed widths is def one of the issues like width:700 on .redstylecontainer
And having a height ever is a big none and will cause overflow. If you must have a height you want to use min-height but in this case you can use your width with an aspect-ratio: 1;
Oh I just found your other media query 425 to 600
I was watching a video on styling as well I just wanted to double check
instead of having specific breakpoints for all devices should I just go ahead and add a breakpoint to every part that messes with the website?
No, you want to make it responsive so that you don't need more many media queries. Can you share your githib so I can grab the images you're using
Sure, Let me just make a new repository for it really quick please
GitHub
GitHub - Arman-Markaryan/DrPepper: Custom DrPepper website I decide...
Custom DrPepper website I decided to create. Contribute to Arman-Markaryan/DrPepper development by creating an account on GitHub.
K I'll be back
alright, thank you!
okay, im not totally sure what your goals are with the nav bar and the social icons or if your problem is the can getting cut off but here is a start with some notes
https://codepen.io/Miss-Fox/pen/ExMjrBR?editors=0100
i dont mind the can peeking out as the screen width shrinks, i think its intuitive ut let me know what youre trying to do
Alright, Thank you so much for all the help I'll go over it and realistically by tomorrow I'll be coding more so I'll mess with some things and give you my thoughts
Hey, I have a quick question regarding the code you've fixed
.Soda-Can {
position: relative;
top: -50px;
width: 100%;
}
So when I get rid of "width: 100%;" Like you've said it ends up messing with the entire red background and Soda-Can and it screws with it entirely how come?
And, To clarify your confusion when it came to the Social Icon my original plan was to have it to the right side of the can but I decided to put them on the bottom it seems a little better
To Add on, When it comes to me dragging my browser to be smaller would it be possible to have the red background and can/socials drag along too rather then get lost?
Also, Could you clarify regarding the Media Querys? You just turned it into an entire comment I wanna hear your thought process for it
And if anyone can,
I realized the container is limiting the movement of everything so I cant push it down how can I adjust my container to be 100% of the screen?
and when I hover over the white empty space it shows up as my body
Iām not sure what you mean by drag along rather than getting lost. If you want it to stay where it is, take out the
left:62% (or whatever the value was) and instead set right:0
You can move the min-height: 100vh back to the container from the body but it will push content down when you make the screen smaller as content stacks
I commented out two of your media queries because you only need one to change a few properties when things are built responsively. (And instead of deleting the properties you set, I commented them out so you could see what was there before I made changes)
Having
Is overkill and confusing esp for the properties youāre changing. You would set the max-width to the next size up like min-width:320px max-width: 419px; min-width: 420px max-width: 480px etc
Otherwise the width is just the size that the image comes in, I forget if I included the image reset but if not, a common reset for image tags is
And if I remember correctly your RedContainer is position absolute so without content inside it, it defaults to whatever width or inset properties have been set
Also forgot to ask where is your menu going on your small screens ? Itās set to display none but thereās no hamburger menu or icon to toggle itās display ?Ohh I see, Thank you for the clarification.
I havent created a hamburger menu yet as I wanted to learn a lilttle bit of JS to have it slightly animated
you can animate with css too! but gotcha, i was just confused
Is it more difficult with CSS? Just wondering
thats subjective, but i find throwing up an animation in css to be much easier than trying to do so in JS, i wouldnt know how to approach it honestly but my JS skills are weak, im fairly new
Also, using animations in CSS allows the browser to take advantage of GPU where Js animations can only use the CPU. And itās nice to just add and remove a class to start or end an animation
Thank you for letting me know this!
Hey I have a quick question Hart, I'm trying to use Margins to move around the soda can and desinging behind it but it wont budge how come
When I try to use Margin-Left I cant push it to the left anymore same with Margin-Bottom cant push it down, It just makes everything in that area smaller
The only thing in that black container I marked that I can move around is the Soda can and Social icons but when I try to move the red styling it doesnt work
for example, I made it to have margin-left: 30%; and it made it look like this
I realized it was the container I have messing with it due to paddings, I got rid of the padding and managed to fix it but would that be the correct way to do it? Or is there a better approach
Box-sizing: border-box; is helpful to put on your * selector so that padding and border included with width
*, *::before, *::after {box-sizing: border-box;}
Alright, Just before I ask another question I do apologize for asking so many im just tryning to get the hang of all this
Also the soda cam itself is a png image , if you put a border around it you'll see that the bounding box of the image is not flush to the can. It has space around it , you can kind of think of it as padding. So it probably was all the way to the right with your margin-left property, you just couldn't see the bounding box
I did want to ask another question
It's margin is relative to its parent not the viewport
Sure thing
So, This is what this currently looks like with a min-width of 375 and max of 600px
How could I make everything stay centered nicely till it hits 600px it looks like this when I move it around
This is the width-max of 600 as you see Learn-More and the redbackground with the can doesnt stay centered
Give the whole container a margin-inline: auto;
alright let me try
I think I had that on the code I worked on for you
You did If im not wrong, But I've also been messing around trying different styling ideas
just experimenting
This is what it looks like now
if I wanted to style the learn more button to be a little more to the center should I make a specific query for it?
Or try to fix it in the original query
since the first query I have maxes out at 600
If you want it to have a property on all screen sizes, put the property outside the media query and it will inherit.
You could also use flexbox or grid to justify-content: center
On the parent
I see, alright thank you!
Honestly, You've been so much help even though there's so many videos out there being able to actually talk to someone and get their insight makes life much easier
I understand that
Just to make sure, Would the empty purple space mess with anything if I add stuff there?
Ok well, I figured out the answer to my quesiton which leads to me to ask how do I remove the purple space
Hey genuine question, When it comes to calculating Rem and Em do people do math to calculate it or do some just search up the answer to it?
idk what others do, i just know the base figures for rem; you could always devie the digit by 16 (as browser default is 16px) to see what value you need. If you want 10px, its 10/16 = 0.625rem; 20px, 20/16 = 1.25rem, 32px, 32/16 = 2rem etc. i dont really calculate ems because i have my font-size set in clamp so i just get the padding set to 1em or a number where its enough padding relative to the element and know it will scale with the text
idk what the purple space is? iwhat are you highlighting to make it?
It shows up when I look over my container
It goes away when I remove Flex
but when I remove Flex it messes with the Text, So any work arounds?
I'd like it to look like this, When I remove Flex it looks like this
Any ideas?
i couldnt tell you from that description, may be the margins not collapsing if you havent cleared out margin, i would have to inspect it myself to know for sure
Would you like the code?
I used inspect to mess with it
I changed it to space-evenly for the "justify-content" And it ended up adding the two purple boxes on each side
Also Hart, Since you've said its wrong to add a height and for my styling you added width: min(100%, 30rem); how can I continue to style that and make it better?
Oh okay the purple is the margin/gap
So you could only put something there if you move everything else or add it as position absolute
How do you want to style it ? Fixed heights are a no no, if you must use a height, make it a min-height so it doesnāt overflow but ideally you want to make up the size with the content and padding.
If possible, Could I send you my CodePen and you could do it for me?
Because Ive run into another issue once again and I have no clue whats happening with it
If you notice, The red in the corner is meant to come out and stop perfectly without going thru the screen (left-bottom side) But for some reason I cant use a margin-bottom to push it further it's stuck down there I even changed the Flex issue to a width
A better explaination I wanted the bottom of the red background to hit the border of the screen but cant and I cant figure out the issue
I can only move it around using Margin-left and right but not bottom which is weird
Itās position absolute isnāt it ? I canāt do anything tonight but if you want to send me your current code I can play with it tmrw
Whatās the position absolute properties you have on it? Did you take the margin off the body/html ?
The styling has just a margin-left on it currently and for my global (*) it has margin/padding at 0
Quick question, When I make the size smaller how can I avoid the circle messing with the text above?
This is confusing to me. You set your parent container to fixed 480. Then itās child is 100% , 30em . Why use a fixed pixel value for one and a responsive size for another? At screens around 320, youāre going to get overflow or have to change it with an unnecessary media query
You have to push the circle down, whether itās margin or positioning with top/bottom
Oh I see alright thank you!
Honestly, Im not 100% sure as well as Ive said im somewhat of a starter at this to so Im tryna get the hang of it
just curious why you used both. but youre also probably having some issues because you have the fixed-height back on your body so its causing overflow
and the overflow hidden
i cant seem to recreate this with the most recent codepen, its prob missing a media query
Oh alright
I'll go ahead and update it
Alright, I've updated the CodePen
for this issue, on the media-query i put a margin-block-start
also im glad to see your margins and padding in em's but its not really accomplishing anything without using clamp or fluid text of some kind. i would again recommend doing so as it saves more media queries and makes sure you wont overflow along any of the breakpoints
Could you explain when to use Clamps/Fluid Text?
Anytime your design will be used on a device that isn't just desktop. So if it needs to be responsive for tablet/mobile fluid text should be used.
I get what you're saying, Just a way to make things more responsive
Another question,
If you look in the image you can see the can and styling is in the right bottom corner the problem is when I move the browser screen it doesnt stay in the position it gets messed up how can I keep it there?
The property I have to make it go to the right is Float: right; if that helps
I tried figuring out if Margin-inline: auto; could work but I had no luck
I'll update the recent codepen to make it easier for you to look at the code
Done
I thought that section had been figured out for the bottom right corner ?
Margin-inline: auto centers it by putting equal space on left and right. If you're using a position property on it, you can use the "right" and "bottom" keywords; or you can use margin-inline-start or margin-left of auto to keep all the available space on the left; alternatively margin-inline-end or margin-right of auto keeps all the available space on the right (for the default writing mode, these properties can change depending what the writing mode is. That's why logical properties are preferred eg margin-inline-start)
A way to keep it responsive to work on all breakpoints and keep less or zero media queries . Instead of changing the font-size on all your different text elements over three media queries, it just works. Then padding, margin, gap in ems keeps spacing relative so those are 3 more properties that don't have to be adjusted in media queries.
Alright, Thank you for the explanation I'll experiement with it and try to figure it out
Oh I getchu, If im not mistaken I should implement the usage of paddings, margins and gaps in EMS so it can change fonts responsivley rather then giving them a new font-size each time
Well, no. Padding , margins, gaps in ems look at the font size of the element so it will always stay relative to the font size. Padding, etc doesn't change the font size; using a clamp on your font-size property does. That clamp grows/shrinks text depending on the viewport and as it grows/shrinks, if padding/m/g is declared in ems, that space will grow and shrink with it.
For example you have an h1 set to 42px. Then a media query at 800px to make the h1 36px. Then another media query at 600px to make the h1 28px. If you declare the margin in px, say 21px, it's still 21px even when your query changes the font size. It looked good at large screens but now it's too small or too large at small screens. Using margin 0.5em will make sure the spacing of the margin is half the size of the font size, no matter what the font size is.
Instead of having those media queries, you use a clamp property so your h1 is 42 at the largest, 28 at the smallest and shrinks/grows correctly at every screen size. Using em on the margin will make sure as it grows and shrinks, its exactly half the size no matter what size the text is. And zero media queries needed.
Ok this makes some sense
Hey I have a question since I dont know how to go about this
As you see the circle in the bottom right is pretty small compared to the rest of the content
How can I make this sizing big and have it become smaller as the screen gets smaller?
Hey Hart, I have a question when it comes to creating portfolios should they be responsive to fit phone sizes and other devices?
or is just mainly laptops+
There's multiple ways to do that
but the simplest is probably a media query.
Could you let me know the other ways as well?
The width could be set to a percentage or
vw. Or by using a clamp()
It really boils down to how you want it to look. Clamp could restrain it's sizing depending on the viewport (stop growing / shrinking at certain size)Alright, I'll give it a try when I can thank you!
is it set to position: absolute still ? you can set its width to a percentage or a vw unit and give it a min-width so it doesnt shrink too small at small devices
pretty much anything you create on the web these days should be responsive
Gotchu
portfolios included
Quick question I've asked this before, When should I use sizing units?
As in the situation im in how would I know to know a certain sizing?
Like when to use rem or px? If it has anything to do with text or if you want something to be sized relative to text (such as icons, if someone needs their font size increased they probably have trouble seeing other things too, so if it should be bigger on request it should) use rem, if needing a unit for something that should always be a certain size (especially small things) use px.
When making your website do change the base font size to see how the website looks for those who do want fonts to be bigger. Be aware for any voids that appear that make the page harder to navigate.
It's reasonable to use rem for everything and then just use px for things like borders when you're on the order of 0-4px, then just look for issues at larger base font size
which sizing units are you referring to? like containers or ...?
elaborate please..
thats what im asking you š¤£ what sizing units are you asking about? how to size divs/containers/images? or text? margins/padding/gap?
Ohhh lmfao
Just overall in any situation
Let's say if im making a header with a nav and everything
what sizings would I be using?
do you mean like width and height? generally want to avoid height, sometimes you need to put a min-height on something but never never never fixed heights. you want your content + padding to make up the size (width/height) of the element.
for a nav bar depending on what you've used on your body, you shouldnt need anything. you have the content inside of it, then the padding around it.
more of like rem, px, em vw
however if you've put a display: flex; or grid; on your body with some other properties, you may need to put a width: 100% on the nav bar so it takes up the whole screen. there are not many hard and fast rules because everything depends on everything else.
I see what you're sayin
read this message again
you generally want to avoid pixels except for units under 5pixels. like a 1px border or ouitline, 1px letter-spacing. even then i use rem but you just def dont want pixels on text its not accessible
there are some crazy number of units available, im gonna send you some videos to watch about this . im sure KP can explain better than i
Ok so Im getting a better understanding
Alright thank you!
Kevin Powell
YouTube
Are you using the right CSS units?
There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.
Zell's article on media queries: https://zellwk.com/blog/media-query-units/
Em vs. Rem: https://youtu.be/_-aDOAMmDHI
Using clamp() for fonts: https://youtu.be/U9VF-4euyRo
The ...
Tristan Parker
YouTube
The Difference Between Rem Em and Px CSS | When to use which? (Unde...
I dont like being pitched just as much as you do, however, if you're curious about how we help web designers beyond these videos the link below tell you more....
https://www.agencyalchemist.com
-----------
Today in this video we are looking at the difference between rem em and px CSS units within web design and Elementor. I explain when you sh...
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
Kevin Powell
YouTube
CSS em and rem explained #CSS #responsive
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries.
The way the em unit is ...
Kevin Powell
YouTube
This flowchart will help you pick the right CSS unit
The flowchart š https://whatunit.com/
There are a lot of CSS length units to pick fromā54 to be exact!āwhich can make it hard to know which one you should use. Luckily, there are only a handful that youāll use most of the time, but it can still be hard to know whatās best, so Iāve made a flowchart to help you decide!
š Links
ā
More on clamp() ...
he has an ENORMOUS channel, you must be familiar with him from somewhere but the videos have taught me alot about best-practices and new properties
Im definetly familiar with him
I found him from CSS Battles and started watching him
This is his discord server, that's why I assumed you must be familiar
I have a quick question, It's actually dumb that I haven't learned this yet but when It comes to making a website that can scroll down a good amount would I do that by making multiple sections with height
this is the current code I have written in CSS and I've realized rather then it scrolling smooth it forces the page to scroll down to the next part
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--main-text: #fff;
--hover-color: rgb(126, 0, 0);
}
.container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section{
height: 100vh;
scroll-snap-align: start;
}
.Main-Page{
background: linear-gradient(to left, #000000e8, #424242);
}
For example, When I scroll down it isn't even the top part still sticks out the this part of the page
why is this still open?
if this is a convo and not a question please move it to a chat (voice, pm, etc.) as people may wish to do a search within the posts to find answers to similar questions
It became one question then an entire chat with these geniuses helping me out, Which I have to say they've been an enormous amount of help.
š
Also for anyone who can help, another issue would be this img as you can see the bottom of the beige page has the bottom white page poppin up how can I have them all be equal heights?
Or am I going about this wrong and there's an actual correct way to do this?
Your sections should be made of content and padding, heights cause so many issues they are best avoided. If you're putting heights on because you dont have content , use a bunch of Lorem Ipsum text or change all of your "height"s to "min-height:100vh" or if it's for mobile screens also svh instead of vh.
For smooth scrolling, you need to put any animations or extra exaggerated transitions into a media query
As for the white border at the bottom I'd have to see all the code but I would bet it has something to do with your fixed heights.
Carl is correct though, new questions should be put into a new post. This thread has gotten very long š¤£ sorry I hadn't reminded of that rule long ago
I apologize regarding the rules, honestly I've had so many questions recently I felt like it would have been annoying opening up so many new chats for every question I have if I cant find them answered
Also since you needed to see the code I'll just link you my codepen
It isn't done (not even close) and going off the current skill I have it aint gonna be crazy good don't judge... š
Also, For the sake of the rules and Carl if it's possible for you to help my case we can close this thread and I'll open up a new one for any future questions I have
You have all your
section tags set to a height of 102vh . I don't see where a white bg would come in underneath the beige bg?I ended up "fixing" it after changing it from the original height of 100vh just didn't know if I actually did it correctly
I've realized all my "fixes" have been done a somewhat incorrect way
Also <i> tags for italicized text is deprecated. In your css on your h1 you need to instead use
font-style: italic if you dont have the italic font linked
You do need to change those fixed heights to min-height s as mentioned or you're going to run into more issues.Oh I see what you're saying
Oh you're right I forgot that
So I did end up chaning it to "min-height: 100vh" and ran back into the original issue
The bottom color peaks up (Ignore coloring it's just to test the look)
When I do change it to 102vh it does look normal but would that be the correct way to go about it?
Try svh or dvh instead if vh
Alright
No that's a band-aid that will come back to bite you later. I'm not getting that same behaviour. Are you zoomed in or out?
Browser wise I'm on 100%
Is it something to do with the fact Im using a different browser?
It shouldn't, the viewport is the viewport. In the code you're working on that differs from the codepen, do you still have the margin cleared on the body and box-sizing border box ?
"* {
margin: 0;
padding: 0;
box-sizing: border-box;
}"
And is it just on that one beige section or on all of them?
The only one that actually looks normal is the first section and last section
the rest of the sections don't fill the screen normally they'll be messed up either top or bottom
It could be something to do with flex align-items. Try taking that off and see if it helps
Wait in which section? The only place I see a flex would by related to the nav
Yes , try commenting that out and see if it helps
Wont that just mess with the alignment in the navigation? rather then mess with the entire page
It's very hard to debug without getting the same behaviour. Flex has some weird behaviours. Please just see if it helps or not.
I commented it out it made 0 difference
You're on a computer not a phone or tablet right ?
Yup, Im on desktop (computer)
I am going to have to sign off for tonight but a couple more things to try are putting a min-height of 100dvh on the body element, it may have something to do with the container not getting the same height constraints and how the cascade works.
Will do, Thank you!
Just to test, I even deleted everything under the first "section" and just added coloring to the sections and it still made 0 difference
I attempted min-height: 100dvh and that sadly made 0 difference
I have no idea what Im screwing up
So it's probably due to one of the parents. Experiment around, comment things out try to debug and deconstruct where the problem lies.
Will do!
Use your inspector too in your browser. Sorry Iām unable to help when I donāt get the same thing , maybe some browser extensions or something added to your ui like a bookmarks bar or something Iām not sure. Will check in on you tmrw
@hrphyn for future reference, if you have a new question, it's best to make a new post. You get more eyes on your post (no one is going to read hundreds fo messages of backscroll to read into this one, even if it might be unnecessary for your new question) and it makes it easier for others with similar problems to find solutions
You're right my fault