@brasspetals
Posted
Hi, Marta! 👋 Sorry no one had given you any feedback on this solution or answered your question - I’m no expert, but I’ll try my best. 😅 Also, good job on this solution! It responds quite well, and I’m glad to see the hover states on the buttons and links!
-
For buttons and button-styled links, I tend to use padding, so I don’t have to worry about things getting squashed or overflowing if I increase the font size. I don’t think there’s necessarily anything wrong with setting a specific height and/or width, but you just have to be aware of potential issues if you increase or decrease the content of your button.
-
Speaking of buttons, technically the ones here are button-styled links, and do not actually have the functionality of a button. I suggest changing these to anchor tags. This is something I also did a lot when I first started these challenges.
-
To clear up your accessibility errors, simply add titles inside your social icon svgs. For example:
<a href=“#”
<svg …
<title>twitter</title>
-
Using
background-size: containon your header will still allow your image to fill the width of the layout without getting stretched out - closer to the design. Bothcontainandcoverare super useful properties for background-size. -
From 768px to about 1200px, the
.main-imgis getting distorted due to both the height and width being set to 100%. I suggest taking another look at this, and perhaps playing around with using just one of the values, with the other set toautoso that the image always maintains its original aspect ratio. -
You can add a
max-widthto your.main__img-deviceto stop it from getting quite so large on the desktop version. However, you’ll have to add some extra code if you want the image to stay centered (ex: adding flex to the parent). Max-width might come in handy in a few other places that get a bit long, especially on extra large (1920px) screens - like the child divs in.main__iconsand the paragraph tag in the final section before the footer. -
From 768px to about 900px, the contents of the
.main__img-logodiv are really cramped. You might want to wait and keep them vertical for a bit longer, and/or play around with adding paddings or margins here.
Again, good job on this solution! 👍 Sorry it’s taken so long to get feedback on it. Let me know if you have any other questions, and happy coding!
@martam90
Posted
@brasspetals Wow, thank you for your detailed feedback! When it comes to btn-styled-links, I was not aware of it. Thank you for pointing me that out. :) I wonder how you make a PixelPerfect solutions. Is there anything else I should know except of using PixelPerfect plugin? I have started to use the plugin but so far this is for me a trial and error method. Is there anything you can suggest? I would appreciate any hints :)
@brasspetals
Posted
@martam90 Ready for my "big secret"? I actually don't use Pixel Perfect. When I first started, I would just have the design image up in another tab and going back and forth...a LOT.
What I do now, after coding up the section and all that, is to set the background-image of the body as the design image (I work with mobile first), and set the background-size to match the width of the design image (example: for mobile it would be 375px auto). Then I set the opacity to something like 0.5. To make it simpler, this is basically what I put in the body when I want to check to see how close my solution is:
background-image: url("./design/mobile-design.jpg");
background-size: 375px auto;
background-repeat: no-repeat;
opacity: 0.5;
Then I use the browser's responsive design mode, set it to 375px or 1440px (whichever layout version I am checking), and look to see how I'm doing. I then play around in the dev tools, tweaking the css to see where I can match things up better.
I think this is more or less what Pixel Perfect does anyway? I’m not sure - I’ve never used it.
Anyway, it's still a lot of trial and error. It's still a lot of eye strain. Now, this probably is not the BEST way to go about things (it might, in fact, be a HORRIBLE way to go about it), and the argument has been made that you shouldn't worry so much about your solutions being pixel-perfect. However, that's how I check. Since I'm not a pro member, I don't have access to the design files to have the font sizes, margins, etc. available to me. However, I do my best to look for patterns. For example, all the headings and margins in the loopstudios project seemed to be factors of 8, which helped me a lot when choosing font sizes and margins for the medium layout. It took me a while before I figured that out though. 😅
While my solutions are close, they're never actually 100% pixel perfect. The main thing is to make them close, while having everything respond and interact well. Functionality first! Plan out your layout and the semantics you want to use. Think first about how everything will have to transition between mobile and desktop. You can always go back in and make tweaks to font sizes and all that later.
Sorry this was so long! I really hope I'm not spreading a bad habit here! 🙈
@martam90
Posted
@brasspetals Pixel Perfect plugin works similar to your method. So trial and error, that's freaking me out :) but this is the way I am coding right now. I write some code and compare with design. And I agree. Functionality first. Thanks a lot ☺️
@brasspetals
Posted
@martam90 Small mistake! The titles should be inside your svg tag, not between the anchor and svg. I fixed the example in my first comment. Sorry about that! 🤦♀️
@martam90
Posted
@brasspetals Thank you, I have updated the code as you wrote, but even though I generate new report, the same errors appear. I do not know why. I compare your solution with mine and I did not discover anything. Anyway, thank you for your help!
@brasspetals
Posted
@martam90 It's because they need to be inside the svg, which was where I was incorrect before. Not in between the anchor tag and the svg.Try it like this:
<a class="icon__img" href="#">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<title>facebook</title>
<path> ...
