Aneta• 180
@anetaanette
Submitted
I couldn't figure out what I was doing wrong with the media queries in scss. The website isn't responsive, I tried different things. Could you please guide me and tell me what I'm doing wrong?
Yakub
@Yakub-Egamnazarov
All comments
- Yakub• 260
@Yakub-Egamnazarov
Posted
Hi, congrats. About your responsiveness issue: I think the problem occurs when you just used your media query, you just re-specified grid-template-columns, but didn't specify grid-template-areas for new width. I think, inside the same media query you should also specify grid-template-areas for mobile layout and add media query for each element inside the grid (cells) specifying grid-area. That would help. let me know if you succeed.
Marked as helpful
1 - David Enomah Ogaranya• 270
@Davetech101
Submitted
Yakub• 260@Yakub-Egamnazarov
Posted
First of all: congrats, the layout works well in both device widths. However, in order to solve some accessibility issues, you could use <main> element instead of div, in your code it is <div> with "all-cards" class. You can follow the frontend validator to solve those issues. Secondly, in order to place all your grid in the middle, you could apply flexbox centration (e.g. align-items and justify-content) for the <div> element with "all-cards" class. The main container.
0 - tomas938• 385
@tomas938
Submitted
Practice...
Yakub• 260@Yakub-Egamnazarov
Posted
Hello Tomas, congratulations on completing the challenge. Regarding your solution I would like to point out the animated arrow, which is made very good and give good user experience. Overall your solution seem very good both in quality and responsiveness. Links are also dynamic. However, I would like suggest adding to your state changing elements, e.g. links, social network icons, some transition, so they would change their state smoothly. About mobile version, I really like how the menu popup comes from the right with animation and hamburger menu turns into X button. Very good. Overall solution is very good. Will see you next challenge. and happy coding.
1 - Carlos Correa• 120
@Deadflight
Submitted
Feedbacks are always welcome <3
Yakub• 260@Yakub-Egamnazarov
Posted
Hi Carlos, congrats on the completion of the project, and here is few comments from my side.
- on the learn more it is been used div element for the line, I think it is ok with that, but in my opinion, it would be better if you used ::before or ::after pseudo-element, and manipulate its opacity, rather than just scaling up the entire btn-div-wrapper, however, you can ignore that.
- in the graphic design section, the tex-block seems misaligned vertically, I think it is better to adjust by margin or padding.
Overall, it seems the solid solution. Good job, keep coding, cheers
Marked as helpful
0 - Gustavo• 25
@GustavoSzi
Submitted
Hi. I'm in the first steps of my web developer career, and I'm practicing html, css and JavaScript for now. If someone has any opinions about my webpage, I'd be glad to hear it
Yakub• 260@Yakub-Egamnazarov
Posted
Hi Gustavo, congratulations on completing the project, and wish you luck and passion for your future career and your new beginning.
Regarding the solution, it seems that you didn't put :hover effect of your elements, like the nav button, LEARN MORE links, and links for social networks in the footer. On the design, you can see variants for the active state, and you can add those states for your solution.
Happy coding. Cheers
Marked as helpful
1 - Rileyyy• 190
@imriley
Submitted
Heya, this is my solution for sunnyside agency landing page. Please let me know if there is anything I can improve on
Yakub• 260@Yakub-Egamnazarov
Posted
Hi Rileyyy, congratulations on completing the project. Everything in your solution seems solid without any problem. However, I would add some transition properties to smoothen the hover effect on Learn More buttons. Secondly, the arrow in the header on the desktop view seems a little bit lower than the center. You could use transitionY property on this element. I saw you used only transitionX(-50%), you can also use it for Y axis.
Cheers, and happy coding.
Marked as helpful
0 - Sodja Nathan O.• 205
@NateOs
Submitted
How many media queries is too much, also how do I reduce the length of my css, aside from shorthand or perhaps SASS ?
Yakub• 260@Yakub-Egamnazarov
Posted
Hey Sodja, congrats on completing the project, it looks consistent in the required display width. Besides that, I would suggest using mixins in your SCSS files to include media queries for your CSS code, this will improve the speed of your project building. To visually improve your solution I would suggest using the transition CSS rule for a button or link elements when changing state, this would add a smooth transition. Cheers and happy coding.
Marked as helpful
0 - PMatěj Svoboda• 165
@Svobyyy
Submitted
Hello, I tried to make it the most responsive I could, any feedback would be good. I think I should use image instead of background in TRANSFORM and STAND OUT sections.
Yakub• 260@Yakub-Egamnazarov
Posted
Hi, congratulation on your completion of the project, when checking online, I noticed several issues with the desktop and mobile versions.
- You could add some dynamic active states as in the design for the desktop version, it is basically made via <<:hover>> effect in CSS. For example, the contact button in the header's navigation bar, and learn more button in the transform section. This would add some dynamic effects to the page. Also in the footer section, all the links and social network links could be made with a hover state.
- For the mobile version it's been made a great job, and like the animation with the menu button, how it is turning to X. However, it seems there is some problem with learning more btn, when the display's width 375px. In order to make a yellow (and red) line under the link, you created a div element, however, it would be better is :before pseudo-element used, it is easy to control, and it belongs to the links themselves.
Good luck and cheers my friend.
Marked as helpful
2 - Ben Wasonga• 20
@bmwasonga
Submitted
I have a lot of questions about the arrow
Yakub• 260@Yakub-Egamnazarov
Posted
Hi Ben Wasonga, you did great job, however there are minor issues:
- on header section try to center the blocks with heading and arrow with the help of flexbox css, or you can use position properties, use top=50%, left=50%, and after that perform transform : translate(-50% , -50%), hope this would help
- In my opinion the contact button on the navbar needs some background coloring and hover effect
- you can adjust white spacing in footer properly
Hope this suggestions would help you, any other questions should be raised, pleas let me know. PS: For reference you can check my solution, may be you can leave some feedback too. Would be appreciated.
Marked as helpful
0
