NEWS HOMEPAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

Community feedback

• 

  Andre Ferreira•450

  @Namonaki0Posted over 1 year ago

  Hi Adbul, it looks impressive.

  Just one thing, like mentioned before the content is superimposing itself on the bottom of the page (desktop design) - talking about main__headline and main__recommended. Looking at it from a glance it looks like if you remove the grid-template and you define the height as max-content instead, then add a margin-bottom to the main__headline it should fix the issue.

  Maybe by now you're already working on it.

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Abdul Khaliq 🚀•72,480

  @0xabdulkhaliqPosted over 1 year ago

  Glad to hear your feedback @Namonaki0, I will update my code as soon as possible.

  And another thing is you can use backticks (`) for sharing/highlighting a code snippet.

  For example, You can try to wrap the "main__headline" with backticks

  `main__headline`
  

  Result: main__headline

  1
• 

  Omar•240

  @omar-csdevPosted over 1 year ago

  hi, I noticed that there are repsonsive issues on larger screens. Mainly the bottom half of the screen on full width 24 inch monitors.

  2

  ---

  

  Abdul Khaliq 🚀•72,480

  @0xabdulkhaliqPosted over 1 year ago

  @iHesh84 Thank you for noticing the issue you're facing.

  But I can't test my application unless you provide the resolution of your screen where you faced the issue.

  Can you provide your device resolution ?

  For Example: This Resolution 1440 x 900 is for standard HD Laptop Screen.

  0

  

  Omar•240

  @omar-csdevPosted over 1 year ago

  @0xAbdulKhalid

  The monitor is 1920 x 1080. Of course while using Chrome I can't use the full height.

  0

  

  P

  Bart•230

  @barterkampPosted over 1 year ago

  @0xAbdulKhalid

  I would suggest to wrap the entire page in a max-width wrapper of 1440px en the contentss itself in a container with a max-width of 1110px.

  for instance:

  body {
   height: 100%
  }
  
  .page-container {
    display: grid;
    place-content: center;
    max-width: 1440px
   min-height: 100%
  (to center the container on the screen)
  }
  
  .content-container {
  max-width: 1110px
  margin: 0 auto (to center within the container above)
  

  If you decide to go this way you should also tweak the paddings and margins of your header and main.

  2