Skip to content
OverviewSolutions
8
Comments
8
Levan
@Mosacd

All comments

  • Gnandal Elisée•190
    @GnandalSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Le challenge que j'ai rencontré, c'était comment écouter le redimensionnement de l'écran, je l'ai resolu grace à ce site : MDN, voici donc ma solution :

    onresize = (event) => {
    if(window.innerWidth > 950) {
        shareOptionComponent.style.width = "fit-content";
        shareOptionComponent.style.backgroundColor = "#FFF";
        authorComponent.style.display = "flex"; 

        shareOptionComponent.childNodes[1].classList.replace("share-option-mobile", "share-option-desktop");
    }else {
        shareOptionComponent.childNodes[1].classList.replace("share-option-desktop", "share-option-mobile");
        authorComponent.style.display = classAdded ? "none" : "flex"; 
        
        shareOptionComponent.style.width = classAdded ? "100%" : "20%"
        shareOptionComponent.style.backgroundColor = classAdded ? "hsl(214, 17%, 51%)" : " hsl(210, 46%, 95%)";
    }
};
    What specific areas of your project would you like help with?

    J'ai ajouter un border radiu à l'option de partage en version mobile, mais c'est pas ç'a n'a aucun éffet, si tu as une idée de mon erreur, n'hésite pas à me le souligner.

    share {
     ...
     border-radius: 0 O 1rem 1rem !important;
     overflow: hidden;
 }

    Article preview component

    1
    Levan•90
    @MosacdPosted 3 months ago

    hey there✌️😁

    Css could use some work, but u were probably just focusing on Javascript, so good work in that department👌

    good luck

    0
  • Levan•90
    @MosacdPosted 3 months ago

    hey there 😁✌️

    The mobile version is a bit bulky, but it looks good. In terms of responsiveness, it's better than mine and has a nice appearance.

    good luck👌

    0
  • Austin•430
    @astnioSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me was moving from the mobile layout to the desktop layout. I started out with the mobile view, which was pretty easy. The desktop view, however, was more challenging. The difficult part was that I did not want to modify the mobile layout too much. My solution for this was to simply change my display from flexbox to grid using a media query. That seems to have worked pretty well, but then my next challenge was actually using grid. I am more used to flexbox, and grid is still quite a bit difficult for me to grasp right now. I did some research and watched some videos about it and seemed to have found a solution that works, but I still feel like I need to learn more to understand it better.

    Responsive Design using CSS Flexbox and Grid

    1
    Levan•90
    @MosacdPosted 3 months ago

    looks good✌️😁

    0
  • Levan•90
    @MosacdPosted 3 months ago

    Hallo there✌️😁

    Making the desktop version a bit smaller would be nice and you should try centering the secondary price tag (just add "align-items:center" to the ".container{...}" class), also It's not very responsive and there is no change for a mobile version, your should work on it a bit more.

    good luck

    0
  • Rajeev•70
    @trajevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • used grid
    What challenges did you encounter, and how did you overcome them?

    used table for calories table but I went to many issues such as a minimal gap between 2 tr's in table. to handle it I used grid. and seperator div's to make its look as design.

    What specific areas of your project would you like help with?

    NA

    Recipe Page using HTML and CSS

    1
    Levan•90
    @MosacdPosted 3 months ago

    Hallo there😁✌️

    Looks good, but text below the title is completely gone, colors and font weights are a bit off compared to the design.

    good luck❤️

    0
  • Levan•90
    @MosacdPosted 3 months ago

    looks nice✌️😁

    I'd recommend using given fonts and adding some transition duration to the <div class="item-link"> elements.

    0
  • Levan•90
    @MosacdPosted 3 months ago

    looks good

    0
  • Levan•90
    @MosacdPosted 4 months ago

    Hallo there @Abdelhadi09

    Desktop version seems pretty close to actual design (could make little size and border radius adjustments to make it more similar, but it's solid). Mobile version needs a little more work, it's not very responsive and needs some spacing adjustments.

    Hope your find this helpful.😁✌️

    0