Skip to content
OverviewSolutions
11
Comments
6

Opeoluwa

@Opeoluwa-OgunlajaNigeria330 points

Currently learning frontend web development

Latest solutions

View more solutions

Latest comments

  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 years ago

    You can try using tailwindcss' dark mode feature, even if its for that purpose only. Doing that, you'll just need to add or remove a * dark class to the html * when toggling dark mode 😁

    1
  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 years ago

    Hey Eduardo,

    • Sass has a for loop feature that can simplify things for you. E.g;
    @for $i from 1 through 4 {
  .socialProof__reviews:nth-child(#{$i}) {
    margin-left: calc(#{$i} * 1rem) (... Just an example)
  }
}

- Not really a direct solution though, but it would be good to learn sass for future purposes.
- Hope this was helpful 🙂
    0
  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted almost 3 years ago

    Hey King!

    For the image, you can use a pseudo element to achieve the same result like ::after or ::before

    • just add some CSS to the .header-img ;
    .header-img{
 ............................
 position: relative;
 isolation: isolate;
}
    • Then you should be able to style the pseudo element to look like;
    .header-img::before{
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  background-color: .....;
}

    Not sure if it's a better way to you though but I hope you found it helpful 🙂

    Marked as helpful
    1
  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted almost 3 years ago

    Hi TRG,

    • you could style the body tag like:
    body{
display: grid;
place-items: center;
width: 100vw; height:100vh;

    • You can use that that to center your elements instead of giving position: absolute to the content so you can get rid of that transform that's taking the content of the page

    • You can add a, maybe width: 80% to the media query of your .card class so it'll fill the page

    -I also think it's a good Idea to use grid( display: grid for these columns

    • You can write;
    .card{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 376px) {
.card{
grid-template-columns: 1fr;
}
}
    • The above will make the colums fill all the space available to them

    Hope those were helpful 🙂

    Marked as helpful
    1
  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted almost 3 years ago

    Hi! I think the best way to center a single element on the page is by giving the body ;

    display: grid (i think flex can also work here)
place-items:center;

    and making the height and width of the body full as well (asin 100vh and 100vw). After that, no more worrying about centering so you can just use percentages like you did.

    0
  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted almost 3 years ago

    Hey Ania,

    • When you set display: none; to an element, it removes it from view immediately so it doesn't wait for any transitions or animations.
    • You can maybe use JavaScript to change a certain class; For example, if you want to hide an element as in your case, instead of having two class states, ['show', 'hide'], you can have intermediaries like ['hiding'] when you want to hide or ['showing'] when you want to show.
    • You can add the animations to those intermediaries then add the display property on the final states 😁😁
    • So, you'll just rotate the class names. E.g; (Stuff is the general classname)
    • Hidden: `<elem class="stuff hidden">
    • Showing: <elem class="stuff show opening"/>
    • Already on the screen: <elem class="stuff show opened"/>
    • Hiding: <elem class="stuff show hiding"/>
    • Hidden: <elem class="stuff hidden"/>
    • Then add css stuff like;
    .stuff{
transition: opacity 1s ....;
}

.show{
display: ........;
}

.hidden{
display: none;
}

.opening{
opacity: 0.2;
}

.opened{
opacity: 1;
}

.hiding{
 opacity: 0;
}
    Marked as helpful
    1