Skip to content
OverviewSolutions
8
Comments
5
lissajous-laser
@lissajous-laser

All comments

  • lissajous-laser•320
    @lissajous-laserPosted about 2 years ago

    Hey, nice work on the project!

    I also use put all my shared Sass variables into a partial file. There shouldn't be anything wrong with it, it makes your code more easier to change by only having one point of reference for each variable. CSS variables are not really better if you are using Sass, because in the end your .scss files get transpiled to CSS during the build process.

    0
  • lissajous-laser•320
    @lissajous-laserPosted about 2 years ago

    Did you try to use React Leaflet? It's a module that lets you use leaflet like a React component.

    link: https://react-leaflet.js.org

    0
  • BlunderBarry•210
    @GGRoy03Submitted about 2 years ago

    First junior level project completed.

    Had a lot of trouble with the responsive part. It's simply not responsive and I'm pretty sure I understand why, but I can't seem to find a solution to my problem. If someone could provide resources or help me with responsive design that could really help me.

    Is it possible not to use Js in this project and if yes I would like to know how.

    Thanks for your help :)

    News homepage

    2
    lissajous-laser•320
    @lissajous-laserPosted about 2 years ago

    I've found that an important pattern to use when making a website responsive is making sure the content is horizontally centered. For instance, when you change the width of this very page, the content remains centered. One way to achieve this is to wrap your content in a div:

    <div>
  <main>
    {...}
  </main>
</div>

    Then apply the following CSS property:

    main {
  margin: 0 auto;
}

    This sets the left and right margins to auto, making it centered. Then in the main selector add width as a relative value (eg %), and max-width as an absolute unit .

    You don't need JS for this project because all the content is the right order to fit the desktop and mobile solutions.

    Let me know if this helped.

    Marked as helpful
    0
  • Martin•40
    @MCotonSubmitted about 2 years ago

    Largely happy but I have a niggling feeling my solution could have been simpler. I'm also still not confident using Aria roles and labelling.

    I do have questions about best practice for accessibility, I'm aware this is a gap in my knowledge (amongst others).

    Also, could I have solved the alignment of the prices without resorting to "flex"?

    Product preview Chanel

    2
    lissajous-laser•320
    @lissajous-laserPosted about 2 years ago

    Also, could I have solved the alignment of the prices without resorting to "flex"?

    I don't think there is anything wrong with using flex. For instance, flex is great for centering even with only a single child element. But other ways to get the spacing are:

    • Using margin-right on the left price (conversely, margin-left on the right price).
    • Setting the left price to display: inline-block and set width to be wide enough to cover the content and the spacing.
    • Setting the parent element of the prices to display: grid and setting a column-gap.
    0
  • lissajous-laser•320
    @lissajous-laserPosted about 2 years ago

    Great design, really like the gradual scaling you've done on the soft-blue background elements.

    I'm pretty new to responsive design as well, one thing I've done was use window.innerWidth like your Nav component, but I use it on my App component, store it with useState, and update it with useEffect. Then it can be passed to any child component that requires the current window width. It's most helpful when you need to change the component structure, but it also helps with programmatically adding classes to an element so that certain styles can be applied at a particular window width.

    Marked as helpful
    1