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
dys šŸ™
dys šŸ™ā€¢11mo ago
Try a <hr/>.
RMON
RMONā€¢11mo ago
Alright, Let me try. I just tried adding but see nothing Oh I figured it out, Thank you!
clevermissfox
clevermissfoxā€¢11mo ago
Try a border bottom on the header element. You don't want extra markup in your html for decorations
RMON
RMONā€¢11mo ago
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?
clevermissfox
clevermissfoxā€¢11mo ago
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 shadow
RMON
RMONā€¢11mo ago
Alright, 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?
GrimX
GrimXā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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.
MarkBoots
MarkBootsā€¢11mo ago
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
clip-path: inset(0 0 -10em 0)
clip-path: inset(0 0 -10em 0)
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
clevermissfox
clevermissfoxā€¢11mo ago
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 ?
MarkBoots
MarkBootsā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
Oh I see . Neat, Iā€™ve never had a use case where I had to notice that. Good to know, thank you
MarkBoots
MarkBootsā€¢11mo ago
np
clevermissfox
clevermissfoxā€¢11mo ago
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 element
RMON
RMONā€¢11mo ago
Thank 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
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
so what are the effective sizes I should target?
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
You have any tips or (funny to say) any videos that helped you understand it if you did learn thru that?
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
Thank you for all the help Hart! Honestly, It's such a pain to do all this.
clevermissfox
clevermissfoxā€¢11mo ago
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ā€
RMON
RMONā€¢11mo ago
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
RMON
RMONā€¢11mo ago
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>
Login ā€¢ Instagram
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing around the world.
clevermissfox
clevermissfoxā€¢11mo ago
Can you out it into a codepen with your css? Css is where we muck up the responsiveness.
RMON
RMONā€¢11mo ago
To be 100% honest with you I have no idea how to do that
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
Ohh alright, Thank you! The code looks really bad on CodePen it's missing like 3-4 icons
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
I do have GitHub but I already did it on CodePen
clevermissfox
clevermissfoxā€¢11mo ago
K I'll take a look
RMON
RMONā€¢11mo ago
Thank you, Prepare to be dissapointed. Also just to show you the entire thing is meant to look like this (excluding responsiveness)
clevermissfox
clevermissfoxā€¢11mo ago
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?
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
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?
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
Sure, Let me just make a new repository for it really quick please
RMON
RMONā€¢11mo ago
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.
clevermissfox
clevermissfoxā€¢11mo ago
K I'll be back
RMON
RMONā€¢11mo ago
alright, thank you!
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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
@media (min-width: 320px) and (max-width: 600px)

@media (min-width: 360px) and (max-width: 600px)

@media (min-width: 420px) and (max-width: 600px)
@media (min-width: 320px) and (max-width: 600px)

@media (min-width: 360px) and (max-width: 600px)

@media (min-width: 420px) and (max-width: 600px)
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
img {
display: block;
max-width: 100%;
}
img {
display: block;
max-width: 100%;
}
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 ?
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
you can animate with css too! but gotcha, i was just confused
RMON
RMONā€¢11mo ago
Is it more difficult with CSS? Just wondering
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
Thank you for letting me know this!
RMON
RMONā€¢11mo ago
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
No description
RMON
RMONā€¢11mo ago
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
RMON
RMONā€¢11mo ago
for example, I made it to have margin-left: 30%; and it made it look like this
No description
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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;}
RMON
RMONā€¢11mo ago
Alright, Just before I ask another question I do apologize for asking so many im just tryning to get the hang of all this
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
I did want to ask another question
clevermissfox
clevermissfoxā€¢11mo ago
It's margin is relative to its parent not the viewport Sure thing
RMON
RMONā€¢11mo ago
So, This is what this currently looks like with a min-width of 375 and max of 600px
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
How could I make everything stay centered nicely till it hits 600px it looks like this when I move it around
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
This is the width-max of 600 as you see Learn-More and the redbackground with the can doesnt stay centered
clevermissfox
clevermissfoxā€¢11mo ago
Give the whole container a margin-inline: auto;
RMON
RMONā€¢11mo ago
alright let me try
clevermissfox
clevermissfoxā€¢11mo ago
I think I had that on the code I worked on for you
RMON
RMONā€¢11mo ago
You did If im not wrong, But I've also been messing around trying different styling ideas just experimenting
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
I understand that
RMON
RMONā€¢11mo ago
Just to make sure, Would the empty purple space mess with anything if I add stuff there?
No description
RMON
RMONā€¢11mo ago
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?
clevermissfox
clevermissfoxā€¢11mo ago
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?
RMON
RMONā€¢11mo ago
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?
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
I'd like it to look like this, When I remove Flex it looks like this
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
Any ideas?
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
Would you like the code? I used inspect to mess with it
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
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?
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
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
RMON
RMONā€¢11mo ago
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
No description
RMON
RMONā€¢11mo ago
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
No description
RMON
RMONā€¢11mo ago
I can only move it around using Margin-left and right but not bottom which is weird
clevermissfox
clevermissfoxā€¢11mo ago
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 ?
RMON
RMONā€¢11mo ago
The styling has just a margin-left on it currently and for my global (*) it has margin/padding at 0
RMON
RMONā€¢11mo ago
Quick question, When I make the size smaller how can I avoid the circle messing with the text above?
RMON
RMONā€¢11mo ago
No description
clevermissfox
clevermissfoxā€¢11mo ago
.StylingContainer {
width: 480px;
float: right;
}

.Styling {
width: min(100%, 30rem);
aspect-ratio: 1;
background: var(--DrPepper-text);
border-top-left-radius: 100%;
}

.DrPepperCan {
width: 480px;
}
.StylingContainer {
width: 480px;
float: right;
}

.Styling {
width: min(100%, 30rem);
aspect-ratio: 1;
background: var(--DrPepper-text);
border-top-left-radius: 100%;
}

.DrPepperCan {
width: 480px;
}
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
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
Oh alright I'll go ahead and update it Alright, I've updated the CodePen
clevermissfox
clevermissfoxā€¢11mo ago
for this issue, on the media-query i put a margin-block-start
.StylingContainer {
width: 300px;
/* margin-top: 40%; */
float: none;
margin-inline: auto;
margin-block-start: 15vmax;
}
.StylingContainer {
width: 300px;
/* margin-top: 40%; */
float: none;
margin-inline: auto;
margin-block-start: 15vmax;
}
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
RMON
RMONā€¢11mo ago
Could you explain when to use Clamps/Fluid Text?
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
I get what you're saying, Just a way to make things more responsive
RMON
RMONā€¢11mo ago
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?
No description
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
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
clevermissfox
clevermissfoxā€¢11mo ago
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.
RMON
RMONā€¢11mo ago
Ok this makes some sense Hey I have a question since I dont know how to go about this
RMON
RMONā€¢11mo ago
No description
RMON
RMONā€¢11mo ago
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+
Matt
Mattā€¢11mo ago
There's multiple ways to do that but the simplest is probably a media query.
RMON
RMONā€¢11mo ago
Could you let me know the other ways as well?
Matt
Mattā€¢11mo ago
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)
RMON
RMONā€¢11mo ago
Alright, I'll give it a try when I can thank you!
clevermissfox
clevermissfoxā€¢11mo ago
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
RMON
RMONā€¢11mo ago
Gotchu
clevermissfox
clevermissfoxā€¢11mo ago
portfolios included
RMON
RMONā€¢10mo ago
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?
Zoƫ
ZoĆ«ā€¢10mo ago
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
clevermissfox
clevermissfoxā€¢10mo ago
which sizing units are you referring to? like containers or ...?
RMON
RMONā€¢10mo ago
elaborate please..
clevermissfox
clevermissfoxā€¢10mo ago
thats what im asking you šŸ¤£ what sizing units are you asking about? how to size divs/containers/images? or text? margins/padding/gap?
RMON
RMONā€¢10mo ago
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?
clevermissfox
clevermissfoxā€¢10mo ago
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.
RMON
RMONā€¢10mo ago
more of like rem, px, em vw
clevermissfox
clevermissfoxā€¢10mo ago
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.
RMON
RMONā€¢10mo ago
I see what you're sayin
clevermissfox
clevermissfoxā€¢10mo ago
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
RMON
RMONā€¢10mo ago
Ok so Im getting a better understanding Alright thank you!
clevermissfox
clevermissfoxā€¢10mo ago
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 ...
clevermissfox
clevermissfoxā€¢10mo ago
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...
clevermissfox
clevermissfoxā€¢10mo ago
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...
clevermissfox
clevermissfoxā€¢10mo ago
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 ...
clevermissfox
clevermissfoxā€¢10mo ago
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() ...
clevermissfox
clevermissfoxā€¢10mo ago
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
RMON
RMONā€¢10mo ago
Im definetly familiar with him I found him from CSS Battles and started watching him
clevermissfox
clevermissfoxā€¢10mo ago
This is his discord server, that's why I assumed you must be familiar
RMON
RMONā€¢10mo ago
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); }
RMON
RMONā€¢10mo ago
For example, When I scroll down it isn't even the top part still sticks out the this part of the page
No description
Coder_Carl
Coder_Carlā€¢10mo ago
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
RMON
RMONā€¢10mo ago
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. šŸ™ƒ
RMON
RMONā€¢10mo ago
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?
No description
RMON
RMONā€¢10mo ago
Or am I going about this wrong and there's an actual correct way to do this?
clevermissfox
clevermissfoxā€¢10mo ago
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
@media (prefers-reduced-motion: no-preference) {

html {
scroll-behavior: smooth;
}

}
@media (prefers-reduced-motion: no-preference) {

html {
scroll-behavior: smooth;
}

}
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
RMON
RMONā€¢10mo 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
RMON
RMONā€¢10mo ago
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
clevermissfox
clevermissfoxā€¢10mo ago
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?
RMON
RMONā€¢10mo ago
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
clevermissfox
clevermissfoxā€¢10mo ago
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.
RMON
RMONā€¢10mo ago
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
RMON
RMONā€¢10mo ago
No description
RMON
RMONā€¢10mo ago
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?
clevermissfox
clevermissfoxā€¢10mo ago
Try svh or dvh instead if vh
RMON
RMONā€¢10mo ago
Alright
clevermissfox
clevermissfoxā€¢10mo ago
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?
RMON
RMONā€¢10mo ago
Browser wise I'm on 100% Is it something to do with the fact Im using a different browser?
clevermissfox
clevermissfoxā€¢10mo ago
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 ?
RMON
RMONā€¢10mo ago
"* { margin: 0; padding: 0; box-sizing: border-box; }"
clevermissfox
clevermissfoxā€¢10mo ago
And is it just on that one beige section or on all of them?
RMON
RMONā€¢10mo ago
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
clevermissfox
clevermissfoxā€¢10mo ago
It could be something to do with flex align-items. Try taking that off and see if it helps
RMON
RMONā€¢10mo ago
Wait in which section? The only place I see a flex would by related to the nav
clevermissfox
clevermissfoxā€¢10mo ago
Yes , try commenting that out and see if it helps
RMON
RMONā€¢10mo ago
Wont that just mess with the alignment in the navigation? rather then mess with the entire page
clevermissfox
clevermissfoxā€¢10mo ago
It's very hard to debug without getting the same behaviour. Flex has some weird behaviours. Please just see if it helps or not.
RMON
RMONā€¢10mo ago
I commented it out it made 0 difference
clevermissfox
clevermissfoxā€¢10mo ago
You're on a computer not a phone or tablet right ?
RMON
RMONā€¢10mo ago
Yup, Im on desktop (computer)
clevermissfox
clevermissfoxā€¢10mo ago
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.
RMON
RMONā€¢10mo ago
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
clevermissfox
clevermissfoxā€¢10mo ago
So it's probably due to one of the parents. Experiment around, comment things out try to debug and deconstruct where the problem lies.
RMON
RMONā€¢10mo ago
Will do!
clevermissfox
clevermissfoxā€¢10mo ago
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
Jochem
Jochemā€¢10mo ago
@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
RMON
RMONā€¢10mo ago
You're right my fault
Want results from more Discord servers?
Add your server