Skip to content
OverviewSolutions
1
Comments
6
mrayala42(Angel)
@coderboi559

All comments

  • Abelardo Gomez Rodriguez•30
    @abelgmzSubmitted almost 2 years ago
    • I would like to know what would be the best option to work with downloaded fonts and use them...
      • Option 1 - only one folder with all fonts
        • fonts-folder
          • font1.ttf
          • font2.ttf
      • Option 2 - folder with subfolders for each font
        • fonts-folder
          • font1-folder
            • font1.ttf
          • font2-folder
            • font2.ttf

    Recomendations are welcome, thanks :)

    Responsive product preview card using flexbox and sass

    4
    mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    You can use google fonts and use the import css keyword. And import the url at the top of your css file.

    2
  • mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    Hello, The site is good but I would fixed a few things.

    1. Use CSS Grid to align everything together. Make 3-columns and align them accordingly to the design. You can also use grid for the bottom news articles to separate the image and the description of the news article.
    2. The mobile nav close button (X) is not fixed to the page. You need to scroll up to close the mobile nav. You can fix it by using position fixed. Maybe using JavaScript, className.toggle('fixed'). Just a quick fix.
    Marked as helpful
    0
  • Amya•140
    @Mia703Submitted almost 2 years ago

    One thing I found difficult for this project was making the mobile menu's grey/black overlay extend the whole height of the page. I currently have the height as a variable in JS that calculates the window's height, but are there any better solutions for this?

    Responsive News Homepage

    2
    mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    Hello, with the overlay and mobile menu. You can use position: fixed to cover everything up. Using media queries if you want it just for mobile. Overall pretty good job. I would use display: grid; to line everything up. Make 3 grid-columns and align everything according to the design to make it look cleaner.

    Marked as helpful
    1
  • mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    Hello, I noticed the layout of the page isn't aligned.

    You could use grid templates on the whole aspect, to align everything according to the design. I would create 3 separate grid-columns and make the elements take up space, to align everything according to the design. To get the layout right.

    I hope you find this helpful.

    Marked as helpful
    1
  • mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    Hello, I noticed you don't have the mobile design covered. You could start mobile-first and then use media queries to fix it for desktop. If you're having trouble doing mobile designs. It's easier to start mobile first and scale up to desktop.

    I've also noticed you're not using the correct colors given. You could get the colors from the style guide and put them into reusable css variables. Easier to use, and cleaner too.

    Hope you find this helpful.

    Marked as helpful
    0
  • mrayala42(Angel)•120
    @coderboi559Posted almost 2 years ago

    Hello, I noticed the layout of the page isn't aligned.

    You could use grid templates on the whole aspect, to align everything according to the design. I would create 3 separate grid-columns and make the elements take up space, to align everything according to the design. To get the layout right.

    I wouldn't use <figure> and <figcaption> to define your bottom news articles. Make them separate into two containers to split them into two parts. The picture taking up one third and the description taking up two thirds. And using flex for the description part.

    I hope you find this helpful.

    Marked as helpful
    1