DEV Community: Mounir Dekali

why figma units look bigger in react app ?

Mounir Dekali — Fri, 28 Jul 2023 11:15:15 +0000

I have a Figma designed by someone, but when i developed the navbar with the same units, the navbar elements looked odd and bigger than how they look in the design presentation.
note that the desktop frame size in Figma is set to 1720px and the navbar links font is set to 24px ( Cairo font ):

while my screen size is 1366px
I dont't want to change the pixels myself visually, I just want to do this professionally and find a way to adabt the figma frame units so they look just good. how to proceed with this please?

SCREENSHOT OF MY SCREEN (navbar)

SCREENSHOT OF THE DESIGN

is there a good youtube channel about : Figma to React walkthrough?

Mounir Dekali — Tue, 25 Jul 2023 16:45:25 +0000

I would like to see the process of React devleopers to take the Figma web design to life from scratch please, i'm not talking about any css genrators or any of this, but just the process of react devs to analyze the website .

why my image makes the website's width scrollable?

Mounir Dekali — Fri, 09 Sep 2022 14:29:26 +0000

As you can see in the image, I have a simple design element as an image, but I only want to show half of it in the edge,but moving it to the right makes the website scrollable on small devices which is weird. how can I simply cut the image if it overflows the devices's width please?
thanks a bunch.

I'm not sure how this CSS Class code works!

Mounir Dekali — Fri, 22 Jul 2022 09:17:00 +0000

I'm new to Web Development, and i've made a good progress so far.
I've encountered this in a recent CSS tutorial while building my Portfolio:

.container { width: var(--container-width-lg); margin: 0 auto; }

.container.contact__container { width: 50%; display: grid; grid-template-columns: 50% 50%; gap: 12rem; }

I have the .container Class in the main index.css file, which has width and margin as properties that's it. But in my Contact component, in contact.jsx I have one div element with the classes contact__container and container, and it's only div that has the contact__container! :

<div className="container contact__container">
        <div className="contact__options"> 
         {stuff here}
        </div>

        <form>
          {Stuff here}
        </form>

</div>

My question is why we need to be specefic and write both the container class and the contact__container class ? In the video he said he needs to be specefic to be able to change the width, but what does that mean please? why I can't just do:

.contact__container { width: 50%; display: grid; grid-template-columns: 50% 50%; gap: 12rem; }

Thanks a bunch