Responsive site with fade in animation

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  Hi, Ciceron! Congrats on submitting another solution! 🎉 Both the animations on load and as you scroll down the page are really nice! Glad to hear you enjoyed it. 😄

  While I didn't have the Figma files for this challenge, I believe the color differences you're talking about are on the desktop version of the hero/top image and the gallery images. To achieve the look, you have to add a black gradient. In the top section, for example, you could layer the gradient and background image as follows: background-image: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url("../images/desktop/image-hero.jpg");

  Some other suggestions:

  • On mobile, the “Our Creations” heading is very large. I'd lower this to match the size of the heading above it.
  • The gallery animations seem to be working for the desktop layout, but not for tablet or mobile. 🤔
  • The gallery item headings should change to a dark color on hover so they remain readable.
  • From 1025px-1290px some of the gallery item headings overflow. Lowering the font-size of the headings would be the easiest fix and will also better match the design.
  • The “see all” buttons should technically be links ( a rather than button). Although they’re styled to look like buttons, they don’t actually have button functionality.
  • Speaking of the buttons, instead of using two, you could look into using grid-template-areas for the gallery. It’s very useful when you have designs like this where elements change position.

  Marked as helpful

  2

  ---

  

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  @brasspetals Thanks alot, I'll rework those details

  -The animation didn't fit the the tablet or mobile version as it triggers only when the end of the gallery is reached, I need to find another way to animate this for those layout. -For the grid button, yes indeed I didn't think to include the button into the grid, that would be a good solution yes -For the button/anchor link I was not sure what element to use, as we don't know what will be the functionality clicking on it, if it redirect user to another page yes it should be anchor, if it extend the number of items in the galery I think it should be a button (i.e: load more button: https://www.frontendmentor.io/solutions)

  Anyway be ready for the v2, and thanks again for the valuable comments :D

  1

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @MarcusTuliusCiceron Very welcome - glad some of my suggestions were helpful. 🙂 Also, you make an excellent point about the button/link. 👍 I had never considered it could be used as a "load more" button.

  1

  

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  @brasspetals new version with the fixs is online

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @MarcusTuliusCiceron Wow you've made a lot of great changes! 🙌 I notice a lot of tweaks that I hadn't even suggested. The overall responsiveness is even better now. Very smooth. I see you got the gallery animated on tablet and mobile too! Looks fantastic!

  I realized I forgot to check large screens (1920px+). The only small thing I noticed is that the grid-item headings start overlapping as the font-size gets bigger, but the line-height doesn't change. I think using clamp() on the font-size might be a good solution here. That way the font-size can be responsive, but you can stop it from getting too big.

  Kudos again for all the improvements you added. 👍

  Marked as helpful

  1

  

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  @brasspetals aaaah, I really need to invest into some quality stuff, I'm actually coding on a 13inch laptop, I can't display large screen like this^^, thanks for the info, I will try to clamp font size yes, thanks alot

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @MarcusTuliusCiceron I'm also on a 13inch laptop. You can use responsive design mode in Firefox or the device mode in Chromium browsers in order to manipulate the viewport to see larger screens. You can then use the browser's zoom function to zoom out and get a better look. 😄

  Marked as helpful

  1

  

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  @brasspetals Oh I knew this to get screen smaller but never thought to use to get a bigger screen

  1
• 

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  Animation mess up with the screenshot so try to use the preview site feature :D

  0