Skip to content
OverviewSolutions
7
Comments
11
Joseph Maramba Weyao
@mamba-dev-KE

All comments

  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 2 years ago

    You can add a main element around everything, define a minimum height of 100vh on the main and then use grid to center both vertically and horizontally. I.e... specify display to grid on main and set place-items to center. Place items is short for justice-items: center and align-items: center.

    2
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 2 years ago

    Hey there, nice implementation here. My recommendation for you here is to:

    • Explore more use of relative units i.e. rem, em, ch, % as opposed to fixed units such as px as they are the best when working with responsiveness in mind.
    • For example, you have set a fixed width and height for the card. The best way to achieve this would be to use percentage (%) on the card and set a max-width on your container to control the growth of the card.
    • You can also leave height to be auto calculated based on the content of your card instead of setting an explicit fixed height.
    • Explore custom properties in CSS for setting the properties that are are used in many elements as this would make your code more maintainable in case you need to change something that has been used multiple times.
    1
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 2 years ago

    Hey, impressive implementation here. I had a look at your code and have some recommendations:

    • To improve your html structure, consider adding a main tag to hold all the content within body.
    • As for the width of the card you can control it using a set-width that is not equal to 100% of the container so that the card does not touch the sides of the screen and a max-width on the card to ensure it does not grow past a set max-width value.

    I used these approaches in my QR code solution, you can have a look under my profile.

    Marked as helpful
    0
  • prince rana•210
    @Prince-RanaaSubmitted over 2 years ago

    Can someone help me with adding the overlay in the image and adding the eye icon in the image, any suggestion is always welcome. Thank You..

    html and css

    2
    Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 2 years ago

    Hey, good job on this. The easiest way for me is using pseudo-elements i.e. ::after. I will share a code pen to an example.

    0
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 2 years ago

    Hey there. Impressive attempt here. I used to code desktop first before, but I came to realize the beauty of incremental development where you start with a simple mobile layout where everything stacks on top of each other then add media queries where necessary to achieve the best render as the screen size increases. If you want to master responsive/mobile first web design....there is a free drip course by the master of CSS, Kevin Powell that I took and absolutely recommend. The course is absolutely key if you want to master responsive web design and it is taught by the best CSS teacher on the internet. Its free too ---> https://courses.kevinpowell.co/conquering-responsive-layouts

    I looked at your code and would also recommend that you should not nest CSS rules in your SCSS files too deeply. One or two levels deep would be ideal for readability purposes.

    1
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 years ago

    Nice attempt. It is generally recommended that grid should be used for layouts that feature two dimensions such as both a row and column while flexbox should be used for layouts that feature one dimension i.e. either row or column. For instance, your author class is a good candidate for flexbox to make the items center aligned on the vertical axis. You can simply do this by setting display of the class to flex and align-items to center. In short, flexbox is meant for layout elements within UI components while grid is meant for placing all the UI components on different columns and rows on the whole page. A good course for learning CSS grid is this free course by Wes Bos (https://cssgrid.io/). Consider checking it out for a deeper understanding of grid.

    Marked as helpful
    0
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 years ago

    Niicely done mate. Very good implementation.

    1
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 years ago

    test it on large displays such as monitors and you will notice that the site continues to stretch. consider using a max-width to set a fixed width so that it displays correctly in large devices.

    1
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 years ago

    Hey, on large screens the site continues to widen and text becomes one line. Consider using a max-width on a container to correct this. Good job though.

    Marked as helpful
    1
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 3 years ago

    Hey Antonator. I also did the same challenge. You can address the background issue by adding a background color alongside the svg background image.

    Marked as helpful
    0
  • Lesley Kimutai•565
    @LeskimSubmitted over 3 years ago

    Hello, dealing with the width and margins was hectic ...If you can give me tips on how to remedy this, I'll be grateful .....if you see the code I ended up using a bunch of @media in the project

    Thanks in advance

    HTML and CSS

    1
    Joseph Maramba Weyao•195
    @mamba-dev-KEPosted over 3 years ago

    Hey bro. Glad to see a Kenyan on the platform. The design is really good. I'm also trying to work on it as we speak and boy I tell you its hard to consolidate the mobile and desktop designs. My feedback on this would be on centering the design in the middle of the page. I think both grid and flexbox have properties for this. You can check out some of them and maybe use them to center the design perfectly.

    0