All comments

@Gnandal

Submitted 11 days 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) =&gt; {
    if(window.innerWidth &gt; 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

Levan• 90

@Mosacd

Posted 11 days ago

hey there✌️😁

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

good luck

Maxked-Code• 120
@Maxked-Code
Submitted 15 days ago
Responsive Design - Testimonial Grid Section
1
Levan• 90
@Mosacd
Posted 14 days 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
P
Austin H.• 270
@austinh-io
Submitted 15 days 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
@Mosacd
Posted 15 days ago
looks good✌️😁
0
ziedlahbib• 80
@ziedlahbib
Submitted about 1 month ago
Responsive
1
Levan• 90
@Mosacd
Posted about 1 month 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
@trajev
Submitted about 1 month 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
@Mosacd
Posted about 1 month 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
Md Naimur Rahman• 100
@mdnaimur
Submitted about 1 month ago
Frontend Mentor - Social links profile solution
1
Levan• 90
@Mosacd
Posted about 1 month ago
looks nice✌️😁

I'd recommend using given fonts and adding some transition duration to the <div class="item-link"> elements.
0
Marwa• 60
@MarwaDawood
Submitted about 2 months ago
Blog Post using HTML and CSS
1
Levan• 90
@Mosacd
Posted about 1 month ago
looks good
0
Abdou_terkii• 10
@Abdelhadi09
Submitted about 1 month ago
qr code challenge
1
Levan• 90
@Mosacd
Posted about 1 month 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

Levan

All comments

Article preview component

Responsive Design - Testimonial Grid Section

Responsive Design using CSS Flexbox and Grid

Responsive

Recipe Page using HTML and CSS

Frontend Mentor - Social links profile solution

Blog Post using HTML and CSS

qr code challenge