My main question, how do you create a responsive layout with Grid, with only 1 column? I seem to be having troubles turning my projects into mobile friendly ones. Any comments or tips would be greatly appreciated!
Update: Was able to fix the responsiveness and layout of my solution thanks to the help of other community members! By removing width, and height from the background itself, all was well!
Hey, if you want to use grid you can set the display property to grid and then apply the grid-template-columns property specifying the width you want the column to be. So for example if you want a one column grid that is 500px you would do the following
.container { display: grid; template-grid-columns: 500px; }
You can get a better explanation here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
For this exercise though, I would personally stick with using flexbox as you are only working in 1 dimension, grid is more suitable for working in 2 dimensions.
Does flexbox only center the div vertically if you set a height to it?
In my case, it did center the div horizontally but not vertically until I set min-height: 100vh to the body. Please anyone explain, thank you!
Hey, yes you are correct in your thinking. The reason you need to set the height is because height is determined by the content, so when you try and center it vertically there is no room to adjust as it is already taking up it's full height. Now when you set the height to 100vh or something equivalent it has more room in order to palce the content centrally.
You can check out this article on MDN for a better explanation of how to align items https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container or I find CSS-TRICKS a good reference, here is their explanation for the align-items property https://css-tricks.com/almanac/properties/a/align-items/
Hope this helps.
I'm having problem with designing that part of the div that is blue in colour. Please anyone help out?
Hey, so I think what you need to do here is to use an img tag and the provided 'bg-pattern-card.svg' SVG file and set it as the source. This can be placed above your other img tag for the profile pic so that it sits at the top of your card component and then you can apply styles as desired to the img tag.
Hope this helps.
Feedback welcome Each time i try to hover the image, icon view also got opacity same as overlay. Is there a way to make icon view got different opacity from the overlay? Thank you
Hey, your solution is looking great so far! For the opacity issue you mentioned you could try setting the background colour using rgba instead of opacity on the div. So on the "overlay" div remove the opacity attribute completely and replace the background-color attribute with 'background-color: rgba(0, 255, 247, 0);', you will also need to specifically set the opacity to zero of the image within the "overlay" div and then on hover change the background colour of the "overlay" div to half opacity with 'background-color: rgba(0, 255, 247, 0.5);' and the images opacity to 1. With these changes you will have the desired effect of the icon having a different opacity to its background. The reason you need to do it this way is because the opacity of the child element cannot be more than that of its parent.
Positioning Elements in the center was a bit tricky. Would like some feedback as it's my first challenge.
Hey, first off your solution looks really good as it is so good job! You said you found positioning elements in the center tricky, I agree, but using flexbox really helps here. I see in your solution you are already using flexbox so you're already partially there, there are just a few tweaks which should really help. On the class qr-section you can remove the 'margin', 'max-width' and 'max-height' properties and replace them with 'height: 100vh' and 'align-items: center' and that's it, the card will now sit nicely in the center of the screen. By setting the height of the section to be the full height of the viewport, flexbox now has enough room to calculate and position the content in the center by using 'align-items: center'.
For a better explanation you could check out this article on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
i found dificult to center the div , because it is easy to center it from sides of browser window , but i could not center it vertically . Did display: flex ; on body and then justify-content: center ; align-items: center; it didn't work , everything i tried didn't work so i had to use margin with exact pixels :( sadly.
Hey, you said you had trouble centering the div vertically, you're on the right track using flexbox with justify content and align items but you must also remember to set the height. The reason for this is because a div just takes up as much space as the content inside of it does, so when trying to center it vertically it has no room to move, in order to align it vertically you can set the height to 100vh which will give it the room to center it. Ideally you would wrap the div within a main tag and add the flex box and height styles there, this should solve your issue with vertically centering. You can also remove the top and bottom margin as they will no longer be required.
Apart from that good job!
The biggest challenge I had on this one is to get the font pixel perfect in size and dimensions. I still haven't managed so any pointers would be greatly appreciated
I think your design looks great, and the font size/positioning is pretty spot on as it is, at least to the point where nobody should say anything about it. If you did however want to play around with the text either in the future or on this project you could maybe take a look at these CSS properties
