Hey All,
I am curious as to how you guys managed to get pixel perfect designs in regards to font-sizes, spacing (padding, etc..) & opacity. As it was difficult for me to get it perfect.
the style guide mentioned a font size of 16px for body but it was kind of mis-leading as some elements are definitely not 16 px in my opinion.
Hi, my understanding is that pixel-perfect is kind of impossible and isn't as important as faithfully implementing the spirit of the design. It can even actually cause issues (not least of which is making you frustrated lol). Here is a good article on this idea https://www.joshwcomeau.com/css/pixel-perfection/.
Regarding font size - my understanding is that the body text font size refers to paragraph font size. 16px is the default p font size though so if it says 16px you don't need to specify that. Also, even though the style guides will have a font size in px, it's best to translate that into rem in your css to make sure it's accessible. Hope this helps.
Hi, I have a problem with the button. In my browser I can't get rid of the black border around the button even with outline: none. This is my first time using SCSS so I appreciate any help from everyone Regards, Hakanai
Hi, to remove the border on your button, instead of outline:none, set border: none. Outline is different than a border - it refers to the outline that appears when an element has focus. And you should, as a general rule, not remove the focus outline because it causes accessibility issues. Hope this helps.
I had always struggled with responsive design. In this project, and I've had to add a lot of media queries to fix things up. I'm curious to know how other developers manage responsive design. What is your thought process?
Hi, looks pretty good overall. I agree with the above comment that mobile-first is the way! I'd also point out you can use the picture element in your html to switch out the image for the correct screen size. Here's the mdn reference page on that if it might help: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture. Best!
I actually couldn't figure out the background so I left it off. I know how to add multiple backgrounds with CSS, however, I couldn't get them to be positioned correctly on any window size. (Like I would set them in place for full screen but if you resize or view them on mobile they are no longer in the correct place.) So what's the secret I'm missing?
Yeah I also thought the background was a bit aggravating on this one. As far as I could tell from the design, the images are actually in different positions for the different screen sizes. So I don't think it's a matter of finding the perfect spot where they will just shift on their own. What I did, was change the background position in a media query. Hope that helps. :-)
I need help to understand how can i do responsive a web site, any tips? Please!
You're off to a good start doing mobile-first. I'd get out of the habit of pixels as soon as you can - I know it maybe feels like there's less control that way, but it really is key if you want to build something responsive. It's also more accessible. For resources to help with responsive layouts I recommend Kevin Powell's free course Conquering Responsive Layouts. https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts. Helped me understand flex box a bit better and also when to use rem vs em. Also really anything on Kevin Powell's youtube channel also - just search for responsive or grid or flexbox... Hope this helps. :-)
Honestly, after numerous attempts to replicate the designs background I came to the realization that I simply do not know what to do. It should be css basics, nothing complicated, I'm probably over thinking it, but I'm still completely lost. I suppose it's important to know when to ask for help and this is one of those times.
So hey, I'd appreciate any guidance or resource links that will help enlighten me.
The background was kind of tricky. It's two images, set both to no-repeat. There's one that is offset from top left and one that is offset from bottom right. You can take the dimensions of the images to compute the offsets. The MDN docs on background https://developer.mozilla.org/en-US/docs/Web/CSS/background I find helpful. Also here is a link to my solution if you want to look at my css for the bg. https://github.com/zoedarkweather/profile-card-component. Hope this helps. :-)
what is the best way to make the layout more responsive or its already good ?
It is stretching a bit at the 450-800px range - I'd either set the media query for a smaller width or add another media query to handle that break point. Also, I'd work on trying to be a bit more descriptive with your class names as it makes your code a bit difficult to follow. Classes named one, two, or a, b, c, d maybe made sense in the moment, but it has no meaning for someone else trying to read your code or maybe even you if you come back to it a few weeks from now. Hope this is helpful.
What can I change to make mobile design better?
Is my JavaScript overcomplicated?
I want negative opinions!!
Hi, I'd say "maybe" to too complicated JS? Probably putting it in one file would improve readability and maintainability. Also, you have duplicate code - page.js and newsletterFormSignIn appear to be the same file with different names. One thing - you can hide the success message using absolute positioning and moving it offscreen to avoid writing a bunch of html with your JS and that would simplify things a lot. Another thing I'd point out is that you can simplify your validation - you have your input set to type email and you made it required, so you don't need to test against any regex or anything. You can use the built-in Constraint Validation API. So you'd test input.validity.valid which returns a boolean indicating if it is violating any constraints - in this case missing or not an email. You could test further as validity returns a validity state (eg typeMismatch or valueMissing), but in this case you don't need to get more detailed since you're setting the same error message no matter if empty or not an email. Hope this is helpful.
I think that i have some problems with box which have the annual price and icon and change link. this problem raise when the width is under 500px. I hope to here what i should do to prevent this problem form raising.
Hi! I see what you mean about the box with the price, but I think it's really that the whole flex container is collapsing on mobile. In your media query, I'd either do something to set a min-width on your flex container, or the better solution is probably to set your flex items to flex:0 so they don't shrink. Hope this is helpful!
<button>
<span><img src="images/icon-cart.svg"> </span>
<span>Add to Cart</span>
</button>
button {
padding: 1.25rem;
background-color: hsl(158, 36%, 37%);
color: white;
border-radius: 15px;
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
Hi! You can use the HTML picture element when you have images you need to swap depending on screen size. No need for media queries if you use picture. Also as far as I know max-width 50% is fine to do when you need to? However, I would try using the features of grid or flex box for something like that. With grid, for example, you can set your columns 1fr 1fr and they'll be 50%. Or with flex box you could do flex=1. Hope this helps.
