Responsive Sunnyside agency landing page

Community feedback

• 

  William Jesus Rivas Duran•230

  @wiridixPosted over 2 years ago

  Helloo, looking at your solution is fine but I noticed certain errors and those you comment

  • The logo is not being used in the header and footer.
  • In the area of the customer testimonials what happens is that you have a height: 100vh and therefore occupy all the space of the viewport, you can place a height in auto or not to place a specific height.
  • In the images in the section (image_gallery) there is a small spacing between the photos, to solve that you have to remove the class "object-fit" to the images, with the grid of the container the images will occupy the space that you assigned in the grid.
  • The background color should be #91d0c2 and the letters should be hsl(168, 34%, 41%).
  • For the hover effect of the footer icons you could use a filter brightness of 10 and generate the white on the icons.

  That's what I noticed, I hope it helps you any questions you can ask 🙌

  Marked as helpful

  1

  ---

  

  Nahid Faraji•150

  @Nahid570Posted over 2 years ago

  @wiridix Hey, thank you so much for your help. I updated my code so far.

  Here is my updated repo- https://github.com/Nahid570/Frontend-Mentor-Challenges/tree/master/sunnyside-agency-landing-page-main

  Hero section background image will not scale up with the device's (Surface Pro 7). Another major issue is when I scroll to the bottom in many devices sometimes testimonials are not showing, sometimes image gallery and footer.

  If you get free time kindly help me with those issues. Again thank you for giving your valuable time.

  0

  

  William Jesus Rivas Duran•230

  @wiridixPosted over 2 years ago

  @Nahid570 Seeing what you tell me on certain devices the layout breaks.

  • In .content_gallery you could use grid-templeate-columns in "repeat(2,ifr)" grid-templeate-rows in "repeat(3,ifr)".

  • In main .content_gallery .five/.six don't put a height of 500px, when using grid automatically use all the available space.

  • In image_gallery you should apply the same as in .content_gallery instead of putting a repeat(auto-fit) you could specify how many columns and rows will have the container.

  • In the images you should implement when in desktop devices use the images/desktop and when in mobile version use the images/mobile. There are many ways to do it for example: create some divs that have the background image or you could use <picture>.

  I hope it solves your layout problems.

  0