search

SelmaNdapanda / Selma-Hamutenya-Portfolio

For the first milestone in the process of creating my portfolio website, I used the design template from Figma. In this portfolio website, I showcased my skills and projects.
8 stars 0 forks source link

- [ ] **[Optional]** I highly recommend fixing this (refer to the image attached) grey space. #5

Open SelmaNdapanda opened 1 year ago

SelmaNdapanda commented 1 year ago

image

_Originally posted by @jasonfelice in https://github.com/SelmaNdapanda/Selma-Hamutenya-Portfolio/pull/4#discussion_r955249236_

AhmedNazirMusah commented 1 year ago

It will be easier when you try Inspecting the elements to identify and make changes to some attributed widths.

adel-gu commented 1 year ago

Hi @SelmaNdapanda 👋 Congrats on finishing your project, however, I'll include some notes I hope will be helpful for you.

Fix Width

Always try to avoid setting a fixed width for your component on the page, because everything is responsive by default, and the moment you set a fixed width you will lose that benefit. So I highly recommend starting to remove those fixed widths and also heights.

Body width

https://github.com/SelmaNdapanda/Selma-Hamutenya-Portfolio/blob/123af6a95fbde007317faf1462107851836f1a25/style.css#L7-L10

To control the height try to set the padding of the parent container instead until you get the desired look.

Components Heights

https://github.com/SelmaNdapanda/Selma-Hamutenya-Portfolio/blob/123af6a95fbde007317faf1462107851836f1a25/style.css#L48-L49

Absolute Unites VS Relative Unites

Avoid using Absolute unite such as px and use relatives instead like em, rem, and %, that relative unites are great help for your webpage to be responsive.

I hope this will be helpful, and I'll provide other notes later.

SelmaNdapanda commented 1 year ago

Thank you Ahmed for the good suggestion, I will work on it

SelmaNdapanda commented 1 year ago

Hi @SelmaNdapanda 👋 Congrats on finishing your project, however, I'll include some notes I hope will be helpful for you.

Fix Width

Always try to avoid setting a fixed width for your component on the page, because everything is responsive by default, and the moment you set a fixed width you will lose that benefit. So I highly recommend starting to remove those fixed widths and also heights.

Body width

https://github.com/SelmaNdapanda/Selma-Hamutenya-Portfolio/blob/123af6a95fbde007317faf1462107851836f1a25/style.css#L7-L10

To control the height try to set the padding of the parent container instead until you get the desired look.

Components Heights

https://github.com/SelmaNdapanda/Selma-Hamutenya-Portfolio/blob/123af6a95fbde007317faf1462107851836f1a25/style.css#L48-L49

Absolute Unites VS Relative Unites

Avoid using Absolute unite such as px and use relatives instead like em, rem, and %, that relative unites are great help for your webpage to be responsive.

  • for padding and margin I suggest using the em unit.
  • for width property use the % instead of px.

I hope this will be helpful, and I'll provide other notes later.

@adel-gu, This is going to be very much helpful indeed. Thanks a lot 🙌