Skip to content
OverviewSolutions
11
Comments
6
Opeoluwa
@Opeoluwa-Ogunlaja

All 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
  • Eduardo•910
    @KTrick01Submitted over 2 years ago

    Hi, this was fun to make! I had a little bit of a hard time doing the displacement of the containers, if you know a better/easier way to do it, please give me your feedback, thanks.

    Social proof section with Flexbox + Grid

    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
  • King•310
    @king-oldmateSubmitted over 2 years ago

    I kind of cheesed the styling of the image by using two divs - one with a blended background image and colour, and then one on top of that with some transparency. Is there a better way of getting the same effect?

    Stats preview card component solution using CSS

    2
    Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 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 over 2 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
  • Olusesi Samuel•40
    @SeNaTu24Submitted over 2 years ago

    I found styling my project difficult especially using my "container width". I am also not sure on the responsiveness of the code. Looking forward to hearing from my learned co-developers on how to improve most especially my CSS.

    Responsive landing page using media queries

    1
    Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 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
  • ania•330
    @ania221BSubmitted over 2 years ago
    • (FIXED, PLEASE IGNORE THIS ONE.) I used class toggling to show and hide social links menu, yet when the class is removed, opacity transition does not work. Any hints about why this happens will be appreciated.
    • I had trouble with positioning the menu, so that the button is centered. How to do that more effectively without trying out many random padding values?

    Article preview component with plain JS

    1
    Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 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