MelissaZhuu
@MelissaZhuuAll solutions
- Submitted 4 months ago
Responsive Testimonials Grid with Flexbox, Grid and Sass
- HTML
- CSS
I came across this issue when creating the tablet view for this project. I don't think it's very noticeable unless there's a device with a really weird dimension, but I would like to understand what's happening.
For the desktop view, I have:
body { height: 100vh; }because I wanted the content to be vertically centered. However, for mobile, I didn't need this and everything is scrollable and works great. Once I started making a tablet version, I noticed that at longer device heights, the content wouldn't be vertically centered, so I added the body height of 100vh, so it would be. But now, when I decrease the height, it cuts my content off at the top and isn't scrollable all the way anymore. Why does it do that? When I change the screen height, shouldn't the vh change to match and the content remain visible and scrollable? How would I be able to keep things vertically aligned at larger device heights but scrollable and visible at smaller ones?
Thank you to anyone who can help and I hope that explanation made sense.
- Submitted 4 months ago
Responsive four card feature section using Sass, Flexbox and CSS Grid
- HTML
- CSS
After researching a bit on best practices, I assumed that the images used for this particular challenge were more decorative and I ended up having empty alt values for them. However, I was just wondering if others did the same or if I should still included some text that described the icons such as "lightbulb icon" or "magnifying glass with eye".
- Submitted 4 months ago
Responsive Product Preview Card Solution with Sass, Flexbox and Grid
- HTML
- CSS
I read on stackoverflow that you have to add the class on the img tag to style it, I was wondering how come adding it to the picture element doesn't work?
//why not this? - Submitted 5 months ago
Responsive Recipe Page with Sass
- HTML
- CSS
Is there a simple way to vertically center-align the list marker?
Although it's not noticeable when the list text is only one line, when the list text wraps onto multiple lines, the list marker is always aligned with the first line of text. Is it possible to have it align with the middle of the list text? Would it require using :before and flexbox or is there a better/alternative method?
- Submitted 5 months ago
Responsive Social Links Profile Solution with SASS
- HTML
- CSS
I'm still a bit unsure when I should be using em as a responsive unit and when I should use rem. So far, I've only stuck with em and everything looks/behaves as expected, but I'm wondering if certain units should be in rem instead, like maybe layout container widths? Also, I was wondering if min-width values should be in px or some responsive unit.
- Submitted 5 months ago
Blog Preview Card Solution with SASS
- HTML
- CSS
As mentioned above in challenges faced, I'm not sure what's the best way to deal with these spacing issues. Am I supposed to always select all text elements and give them margin: 0 to avoid random spacing issues? Or is there a simple way to cancel these defaults? Also, how do people vertically center text elements in a div? I think it's pretty common to want to horizontally and vertically center something in a div, so I'm not sure why it was so difficult. Is flexbox the way to go? It feels a little weird, almost overkill, using flexbox for a simple div with only one text element, but that's the only method that has worked for me in this project. Any alternative suggestions would be helpful! Thanks.
- Submitted 5 months ago
Responsive QR Code Solution Using CSS Flexbox
- HTML
- CSS
I know it's ideal to not use pixel values in order to make a website responsive. However, is it ok for border-radius to be in pixels or do people usually change that to a responsive unit as well?
