@Stygmates
Latest solutions
Memory game built with React, Typescript and Router
#react#react-router#typescript#styled-componentsSubmitted about 3 years agoEntertainment App built with React, Typescript and Redux
#react#styled-components#typescript#reduxSubmitted about 3 years agoaudiophile e-commerce website built with Next.js
#next#redux-toolkit#styled-components#typescriptSubmitted about 3 years ago
Latest comments
- @Ging3rmint
You are on the right track to use flexbox but instead of justify-content, you can use margin-top: Xpx for your nav and margin-top: auto for the profile image.
- @pyaetheiN@Ging3rmint
Nice work. rather than putting media query for each and every bigger screen size, what we usually do is to set a max-width to your container then use margin: 0 auto to centralise it.
- @Nano950@Ging3rmint
It looks like you need more practise with CSS. here are some tips
-
never set a fixed height to an element (it will not scale, and what you get is your button going out of its container because your p tag cannot scale)
-
never use vh unless you want your element to fit to the screen or you are using some sort of calculation.
-
try to practise with SCSS and use BEM (block element modifiers) naming convention. these are the industry standard.
Marked as helpful -
- @cama0047@Ging3rmint
To address your question, on click method does not return any React component at least not that i know of. Why would you want to do that?
- @Prince-Ranaa@Ging3rmint
To scale an image properly, you would want to apply the object-fit property. in your case, use object-fit: fill
- @samuelpklm@Ging3rmint
What you need to do is to get the event from the button click or the entire div wrapping the title, then look for its sibiling. you shouldn't need to use classes to identify them.
An example:
<div class='accordion'> <div class='accordion__header'> Title </div> <div> class='accordion__content'> Content </div> </div>With the markup shown above, add a click listener to the class 'accordion__header'. you will then receive an event from the click, use event.target to look for its sibiling. In Jquery you would use $(event.target).next() (i cannot remember the syntax for vanilla). Then, you can use the slideDown, slideUp or slideToggle to animate it.
