Skip to content
OverviewSolutions
9
Comments
4
Mallory
@azerroth11

All comments

  • Mallory•120
    @azerroth11Submitted over 3 years ago

    I feel like I did pretty good but I'm of course open for suggestions for improvements ! Thanks in advance :)

    Mobile first

    3
    Mallory•120
    @azerroth11Posted over 3 years ago

    Thank you for your answer, I did as you suggested !

    I thought that it was important for bots to read the website and have a complete code, that's why I've taken the habit to provide something.

    i'll make sure to think more of the need for it in the future :)

    0
  • Mallory•120
    @azerroth11Submitted over 3 years ago

    For the first time I had a smooth coding experience, I know it's only junior level but still very pleasing ! The only difficulty I believe I faced was the background img that's supposed to go at the bottom of the mobile version. For some reason, after making it position: absolute, bottom: 0, right: 0; it wouldn't go at the bottom right of my mobile version but would instead stay as if I had coded it in the main hero (100vh). How am I supposed to set it if not absolute to the body ?

    In the end, I just didn't include it.

    Mobile first, vanilla CSS

    2
    Mallory•120
    @azerroth11Posted over 3 years ago

    Hey there, thanks a bunch for that awesome, detailed answer !

    I am indeed coding on a super ultra wide screen which makes it sometimes difficult to estimate the dimensions. I tried using the dev tools to give myself the viewport dimensons that are expected of me (first 375px wide for the mobile version and 1440px wide for the desktop version) but the end result when I uploaded was very far from what I had worked on and expected to see. I had to do some last second modifications.

    I'll definitely use min-width, you're right, I'm not sure why I used the other one !

    As for the spacing between the cards, I have been using "justify-content: space-between" so it really depends how wide the screen is. I'll try to find a way to have a set distance between the cards and a slightly-changing width on the cards if need be.

    I didn't think I still could position and work with my background images if I embed them in the background property of the body tag. I'll give it a try, thanks again !

    0
  • Mallory•120
    @azerroth11Submitted over 3 years ago

    How do I make it so that I don't need to use !important in my computer version when creating mobile first ?

    I did mobile first. So my stylesheet links look like this:

    <link rel="stylesheet" media="screen and (min-width: 768px)" href="./css/style.css"> <link rel="stylesheet" href="./css/mobile.css">

    Mobile first, pure CSS

    2
    Mallory•120
    @azerroth11Posted over 3 years ago

    Thank you so much for your precise answer, it indeed fixed my issue and I'll make sure to do so in the future on my small projects ! It was a great help, have a lovely coding day !

    0
  • Rakib•10
    @Rakib-RSubmitted over 3 years ago

    Any criticism or suggestion would be more than welcome . Thanks !!!!

    Responsive Web Design

    1
    Mallory•120
    @azerroth11Posted over 3 years ago

    Hey there, it's a good solution you've posted. The pc version looks very close to the original, great job ! I'd suggest starting with the mobile version (which can be the the trickiest) and allows for a easier transfer to the pc version.

    I very briefly looked at your code, as a general rule, one names his css style (you're of course free to name it what you want) but it can be confusing having the same name as your main page. Other than that, clean code :)

    0