Hey everyone I'm facing few problems #1 I got 2 background colors behind img and can't use 'mix-blend-mode: overlay;'. I need help with that. #2 How should I set the width and height of the card since fixed heights like px aren't helpful with higher screen resolution? Should I be using vw and vh or em ? Please review and suggest improvements. Thank you
1- The mix-blend-mode works by blending the content of the element with other element's background. Setting the background of the img has no effect. You could wrap the img in a div and set the background of that div to alter how it looks.
2- Set the width of the card using vw if you like. But always set a max-width if you are, otherwise large screens, like 4k, will be far too wide. Also you don't need to specify heights in most scenarios. The content within the container will automatically fill it, and you can apply a padding to make it look nicer.
Hope this helps!
My first project made alone. What's your opinions?
Hey man good design! Noticed some things you might want to look into
height: auto; you'll notice your card will fit all of its inner content, and when content is added it will expand. This is much preferred over specifying a value in px, and you can use padding to put whitespace between the content and the edge of your card.top to move elements upwards. You did this at profile-pic, and I used to do this too. But you could use position: absolute; on the img, then use transform: translateY(-50%); to place it in the 50% above where it usually would be. Then it's just a matter of horizontally centering the image.Have a good one :)
I still have trouble with moving elements using the directional properties like "top, bottom, right, left", as I think there are more efficient options than those;
I also have problem with measuring units for the elements. I don't seem to have the knowledge to decide how many px should this box be and all. Also, kind of connected to the first point, I'm confused whether or not we can use 'fr' unit as the unit for the aforementioned directional properties?
Can't preview your site but based on your code here are a few pointers:
Good luck! :)
Hi!, what's up? nothing much to say for this one, I have to optimize my classes more due to sometimes I name classes that I'll never use, therefore It's just a waste of code.
I'd like to mention that this is my second attempt using the 7-1 pattern for structuring projects, and I'm starting to feel more confident with it. There are a couple of differences in the way how I structured the challenge with the 7-1 pattern with respect to the last time basically because I figured out better ways to do certain things and I saw things that I misunderstood, thus I fixed them in this one.
As always, feedback is appreciated :D!.
Looks good. Your scss is structured nicely. And your classes are following BEM which is great. Just a minor inconsistency with your plan__change-btn. but overall a really good job!
Comments please!
