did this project using flexbox. I couldn't figure out how to put color to the black and white image and when scaling from desktop to mobile, the layout acts quite weirdly. I would be really grateful if someone can have a look at my codes and tell me what I did wrong. Thanks a lot!
HI Duyen! Please not that in this challange you have 2 images.
One for the desktop version and second one for the mobile. This fact can tell us that we are going to have to switch between those 2 pics.
You can not do that (without using JavaScript) by putting the img there by using an <img> tag.
What you should do is:
create and empty div in your markup code,
than set the image as the background of this div by using:
background-image: url(the div's url goes here), (color code goes here);
Now you have two images set as a background of the same div, first is image by using url, second one is a color, they should be separated by a comma.
Now you are able to use background blend modes to blend those two types of background.
Please also note that having image as a background set using css not putting it into the document by using an <img> tag allows you to switch desktop/mobile image using media queries.
Keep up the good work!
Any feedback is more than welcome, also if you have any questions feel free to ask, peace <3
Hi @pikamart, Thank you for your support! As for the body min-height that's exactly what I've been missing! Giving it just height on mobile the content would overlap top and bottom but stay centered. Really big thx for this solution. As for the footer I position it relative to take it out of the DOM order. Making it child of flex container therefore occupying some space in it, will make the second element not centered. Unless....I maybe give a footer margin top auto...yea that might work! As for the screen readers, semantic tags, and arias that is a definitely my weak side, that I have to work on more. If you be so kind please follow my future challanges and share your feedback! I've learned a lot from you. More than form few hours course! Thx again, peace <3
didn't really understand why the SVG background is different. And closing space between two block elements. And how can i make the main element stay centered?
Hi there,
If you want to center main element:
get rid of the <section> tag, it doesn't do anything.
Also if you have attribution div, just make it footer class="attribution".
Style your body element to be a flex container and give it a height, like so:
body {
height: 100vh;
display: flex;
justify-content: center;
align-content: center;
position: relative;
}
This way your body is a flex container with 2 children, main div and also footer element with the class of attribution. We gave it position relative, so now you cant give the footer position absolute which takes it out of the DOM, and you are left with perfectly centered main element.
As for the footer do bottom: 0; left 50% + transformX and you are good to go. If you have any questions feel free to ask. Also look my solution if you want to see the code, Keep up the good work!
In the preview pictures some of the borders had a border-radius. I tried to add border-radius as well, for the mobile version is looked great, but as soon it went to desktop screen, it still had the border-radius from the mobile screen. I don't know how to not keep the border-radius from the mobile version to desktop...
Hi, The reason why you can not use border-radius properly is because, your rows are stacking. It's happening because of using bootstrap, try use custom media-queries instead. Check my solution, when screen is getting smaller they just shrink but not stack. In your case when you use border-radius on main element you will get to the point, when top if it is 2 cards and bottom of it is 1 card, so I'm guessing 2 top cards gonna have rounded corners, bottom one is not going to have those at all. Keep up the good work!
for some reason my css isnt loading properly. any advice?
Hi there!
Yes, image is not loading because you have to use:
background-image: not just background.
Also instead of using ::before sudo element you can use multiple images as a background separated by , and then use blend modes.
Keep up the good work!
Hello,
I built most of the things from the reference image provided. But I still feel that the background image with pattern is not positioned properly on desktop mode. Would love to have some feedback to rectify the background issue.
Best Regards!
Dear Michael, Honestly, given all types of screens and resolutions it's basically impossible to get a perfect match. On some challenges offset is used. For ex. to set two background images with offset I use:
background-image: url(image1), url(image2);
background-position: -100px 0, calc(100% + 100px) calc(100% + 100px);
By using this trick 1st image will be top left corner -100px, 2nd bottom right +100px no matter the screen size.
Try to get a perfect match with order summary challenge using offset. Stay motivated!
🤕 Need Help! This is my third challenge here and this is by far the most difficult one I have encountered. I managed to make the desktop design work but it still isn't quite good 😶. And I can't really configure how to design the mobile design. Please kindly help me 🙏🏻. I really do appreciate your help 🤩.
Hi, I think it would be easier for you not to use margins. Basically all entry point level challenges are centered, try do it like this:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position realative:
}
Then body element has to have 1 child only - the container that wraps the content. I've also gave it position relative, because on every challenge you ave the attribution div. Give it position:absolute and position it below the page. It will take it out of the DOM, so it wont mess your positioning.
Try not to use pixels. For the media queries use max instead of min just as @Tereza said. I use Chrome, it has a dev tools where you can see media queries with breaking points. Try google it if you won't find it, pm me I will record my screen and show you how to do it.
Peace and stay motivated!
I would like a review on how I can improve my code and which areas I should work on.
Thank you.
Hi there! Dude first of all welcome to the community! I've just looked through your code. The fastest feedback you can get is from the FrontendMentor web-app itself. After you post a solution you get a report. For ex. yours has 4 accessibility issues and 2 html issues, check them out. One of the errors would probably be not using html5 semantic tags as <main> <header> <footer>. By looking at your code Im under impression that it's kind of outdated. For ex. tables are not that used anymore. Also when you need button you just use <a> tag, give it display block and set padding or width so it looks like a button. Using buttons as such is great when u attach some php methods to them. If not, just use <a>'s. As for your CSS u use positions a lot, (relative and absolute I mean). It's not good way to position things. You should learn about flexbox and grids. Using positions first of all takes elements out of the DOM, second creates so called "stacking context". Putts things in front of the other things. Different stacking contents applies to different parent-child element relations, so when you set position to basically every element you create it's gonna get really messy really quick. I suggest you to go to YT, search for "Traversy media" chanel. Brad Traversy has nice courses that you could start from. If you need more advanced knowledge of CSS itself you should definitely check out Kevin Powell's YT chanel. Wish you all the best, If you had any questions feel free to ask. Stay motivated!
Hi! Is my code easy to read, or do you think some sections could be structured in a better way? Let me know! All feedback is welcome and appreciated!
Hi, I find it easy to read and I understand almost all of it. Except this crazy googleapis import. Is it not cleaner to use @import at the beginning of your style.css file? This way you can import all fonts and weights using 1 line of code. Maybe you should consider this method, Keep up the good work!
No questions in particular, but honest feedbacks are always appreciated.
Hi! First of all really great job! My advice, if I may, is try not to use pixels. Use EMs and REMs instead. If you need lets say gap 40px or margin 10px, style HTML tag: "font-size: 62.5%" - by doing this 1rem is going to be 10px, than you use for example gap: 4rem (gap 40px), Hr opacity seems not to be working. I used border-bottom 1px solid + black color in rgba notation. Keep up the good work! All the best.
Hello, My first project on Frontend Mentor. It was fun.
I spent a lot of time position stuff and center thing with CSS grid and Flexbox. If you find anything weird in my solution or have any tips or trick regarding my solution please say it!
Thanks, I will be working on the next challenge!
Hi, It turned out great!
If you want any feedback I will tell you what I do. Not sure why, this is kind of my workflow, so:
1st use html5 semantic tags, such as: header, main, nav, footer, aside, use one h1 tag per page. It helps structure the document better. So in your case switch h2 with h1 and style it to look smaller.
2nd I don't give body a width, just height 100vh,
3rd I don't use ID to style things. It has to do with the specifity and presidency.
4th I don't use pixel unit. Unless it refers to value that has no need to change. Like when I do really really tiny transform on button hover so like "move it up 2px" or give border radius 3px.
I really love the idea of using grid. Im aware of it but it's something I have to practice some more. And I basically never use it to structure single dimensional items/cards.
Keep up good work! All the best!
Struggle with what measurements to use in CSS - any tips or recommendations for tutorials that help solidify it in your head would be great.
Hi, Try not to use fixed units - pixels. Use EMs, REMs, % and viewport units. When it comes to CSS i tend to use html: {font-size: 62.5%}, because most of ppl have 16px set as browser default, so when I style html tag this way my 1REM is equal to 10px.
Visit Kevin Powell's youtube channel to learn more about units and CSS in general.
As for this particular solution to match the width I think I've used 80% of body. so width: 80%; on container.
Hope It will be helpful, peace.
