Skip to content
OverviewSolutions
7
Comments
11

Joseph Maramba Weyao

@mamba-dev-KENairobi, Kenya195 points

Software engineer

I’m currently learning...

Node, Express, Mongo

Latest solutions

View more solutions

Latest comments

  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 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 about 3 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 about 3 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
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted about 3 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 about 3 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 over 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
View more comments