@monicamclaughlan
Submitted
Trying to get more comfortable with flex-box and media queries. As always, all feedback welcome!
Looking to hire developers?
@isimeri
@monicamclaughlan
Submitted
Trying to get more comfortable with flex-box and media queries. As always, all feedback welcome!
@isimeri
Posted
Hello! You did a pretty good job on this project. I'd still change a few things, though:
margin-bottom
that you set up for your cards. As the point of this project is to get you to know Flexbox better, rather set a height
or min-height
for your .card-section
and just let the align-items
and justify-content
properties do their job, instead of using the cards' margins to increase the .card-section
's height by force. I'd suggest using display:flex
with a flex-direction: column
for .middle-cards
as well, so you don't have to guess margins to position the cards.<body>
take up the full screen height. I'd actually use some div.container
for all the content, so i won't have any regrets if i decide to add some feature to the page some day(but it's no big deal for this specific project).max-width: 1440px
media query. The .card-section
looks very much wrong for screens wider than that. I know there was some mention in the project's instructions file, about the design being supposed to work for that width, but that shouldn't limit you from making it work for screens wider than 1440px.<footer>
is directly below the cards, but that is due to the <body>
not taking the entire height of the screen. It really comes down to personal preference in this specific case, but i think it would look better if the <footer>
was at the bottom of the screen.Other than that, you did a great job. Keep it up!
@vjwalsh
Submitted
Complete beginner practising the HTML and CSS I've been learning. Any feedback or pointers massively appreciated.
Some of the background image colour is showing through in between the profile picture edge and white border - I'm not sure why this is or how to remove it?
@isimeri
Posted
Hello. Your project looks pretty good overall, but it could be better, of course. Here are a couple of things i want to mention:
<body>
take up the entire height of the screen at least, because it takes up only as much as it's content does, if no height
or min-height
is specified. It can look ugly if there is not enough content to fill the entire screen height..credit
, because it is very hard to see and read, and i would use absolute positioning here as well, to fix it to the page's bottom. If you reduce the width of your screen, you can see how it goes to heaven along with the profile card, but that's also due to the <body>
's height shrinking too much..stats
inside a container <div>
and use display: flex;
with justify-content: space-evenly
(or space-around, doesn't matter too much), instead of bothering to pinpoint all the margins to make them look nice and evenly-spaced(but hey, if you like trying a bunch of margins until you find a good one, nobody can stop you :D ).As i mentioned earlier, looks good overall, and taking into account that you are a complete beginner, you did a majestic job. Keep improving and have a good time!
@cguttweb
Submitted
I used mobile-first which works well I think but the main issue I've had with desktop versions is the different patterns and how to position them? I used background images on mobile, however in desktop view should I perhaps use absolute positioning instead?
@isimeri
Posted
Hello there. You are right, in some cases you can use those wavy patterns as background-image
and forget about them, but in the case of the pattern that goes over the blue and the white background, you'd probably want to use absolute positioning. There is another interesting issue i found. By default, your nav
has the .show-hide
class, and if you reduce the width of your screen, to reach the mobile layout and press the hamburger button to close the nav
menu, then increase the screen width to go back to the desktop layout, there is no nav
menu and no button to make it appear. I'd actually create another nav
menu, specifically designed for the mobile layout and just keep it display: none
in the desktop layout, so there won't be any worries regarding the nav
being there when switching between the mobile/desktop layouts. Also, your links and buttons don't have any hover states and the top logo looks a little distorted in the mobile layout, but those are minor issues. You have done a majestic job, mostly. Keep it up!
Marked as helpful
@NJain0001
Submitted
I didn't know how to make the two semi circles in the background be positioned properly. Any advice on how to go about that part of the UI would be great
If you view the code through the Dev tools, the margin is going outside the div tags for the name section (below the image). Is that normal, or is that a code smell?
@isimeri
Posted
Hello. I read through your code a little and it's great overall. Regarding your first question, i would place those svg circles inside the html <img>
tags instead, and then tackle the positioning with position: absolute
.
About the second question: your card .user-card
has a fixed height 22.5em
. The heights(margins and paddings included) of its children: .pattern-img
, .user-info
and .user-number-info
when added, make up more than the height of the parent .user-card
. That's why you see the overflow.
Another little thing, when defining the height of .pattern-img
, you used vh(which is a responsive unit), but also used em
and rem
for the other children. It's good being consistent, using vh or %, etc. everywhere(where it makes sense, of course). Reduce the height of your browser to see how .pattern-img
vs the rest of the card behaves. Cheers!
@cguttweb
Submitted
I've done using plain CSS because I don't write enough of it these days. The issue for me was the background images how do I position to the two separate images? Any suggestions appreciated.
@isimeri
Posted
Hey there. Don't use those svg images as background-image
. Rather place them in <img>
tags inside your html and use position: absolute
and the top, left, bottom, right properties to position them. Cheers!
@cguttweb
Submitted
I'm reasonably happy with the final result but there is definitely room for improvement particularly in the JS I feel and form styling is always awkward to get it consistent. Any suggestions welcome.
I had some issues with the error icons managed to add the icon to the input fields, but it doesn't seem to appear on the password field for some reason? Anyone have any idea why?
@isimeri
Posted
Hey there. The error icon thing doesn't appear anywhere at all on my side. I would wrap each input element in a <div class="wrapper">
and use the .wrapper::after
pseudo-element to handle this. Cheers!