@Muhammad-Habban
Submitted
Made this theme switcher. If there's a better way to do this please do share it. Feedback is much appreciated.
@Opeoluwa-Ogunlaja
@Muhammad-Habban
Submitted
Made this theme switcher. If there's a better way to do this please do share it. Feedback is much appreciated.
@Opeoluwa-Ogunlaja
Posted
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 😁
@KTrick01
Submitted
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.
@Opeoluwa-Ogunlaja
Posted
Hey Eduardo,
@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 🙂
@king-oldmate
Submitted
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?
@Opeoluwa-Ogunlaja
Posted
Hey King!
For the image, you can use a pseudo element to achieve the same result like ::after
or ::before
.header-img
;.header-img{
............................
position: relative;
isolation: isolate;
}
.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
@MugeshTRG
Submitted
Do suggest alternative code if you have any.
@Opeoluwa-Ogunlaja
Posted
Hi TRG,
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
.card{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 376px) {
.card{
grid-template-columns: 1fr;
}
}
Hope those were helpful 🙂
Marked as helpful
@SeNaTu24
Submitted
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.
@Opeoluwa-Ogunlaja
Posted
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.
@Opeoluwa-Ogunlaja
Posted
Hey Ania,
display: none;
to an element, it removes it from view immediately so it doesn't wait for any transitions or animations.['show', 'hide']
, you can have intermediaries like ['hiding']
when you want to hide or ['showing']
when you want to show.<elem class="stuff show opening"/>
<elem class="stuff show opened"/>
<elem class="stuff show hiding"/>
<elem class="stuff hidden"/>
.stuff{
transition: opacity 1s ....;
}
.show{
display: ........;
}
.hidden{
display: none;
}
.opening{
opacity: 0.2;
}
.opened{
opacity: 1;
}
.hiding{
opacity: 0;
}
Marked as helpful