Kurt Gonzales• 300
@KurtGonzales
Submitted
Hi everyone can you please give me some advice on how will I overlay the .community class over my footer. Any recommendation will be appreciated. Thanks everyone!
Gregg Christofferson
@gchristofferson
All comments
- Gregg Christofferson• 295
@gchristofferson
Posted
Hi @KurtGonzales!
One way to do it is with absolute positioning. You need to move the .community class div inside your footer, then set position: relative on the footer. Next, edit your .community class with these rules:
.community { margin: 0 auto; position: absolute; left: 0; right: 0; top: -140px; background-color: #fff; color: black; text-align: center; width: 50%; /* margin: 100px; */ /* margin-top: 90px; */ /* margin-bottom: 10px; */ /* margin-left: 300px; */ border-radius: 10px; box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.05); }This will get it in the ballpark but you'll have to probably make a few adjustments to your margins on the section above the footer and the top value of .community. Let me know if that helps!
Marked as helpful
0 - Shannon• 50
@Shannerella
Submitted
- I can't get the hue quite right on the picture
- In the media query I keep having this thin purple line under the picture no matter how I try to fit the content
- My chrome screen does not go smaller than about 500px in width so it was a little hard to get the measurements right unless I pushed and tested every single change through my github page to my phone. Tips how to make that work easier would be helpful (VSCode extension?)
Gregg Christofferson• 295@gchristofferson
Posted
Hey @Shannerella 🙋♂️,
Great job, very well done!
Here's a suggestion to get the hue right on the picture.
- on
.right-picturechange the background color tohsl(277, 60%, 61%); - on your image change the opacity to 0.75 and add
mix-blend-mode: multiply.
That should get your image looking closer to the design. I hope that helps!
0 - dkvel• 50
@Theguydev
Submitted
Why do I have scrollbars and how come the card on the far right no longer takes the length of the whole container when I change the display(Among the last lines)
Gregg Christofferson• 295@gchristofferson
Posted
Hey @Theguydev ✋
Your scroll bar is because of this media query:
@media only screen and (min-width: 800px) body { min-width: 100%; }Just remove that and your scroll bar will disappear.
To make the card on the far right take the length of the whole container, you need to add
min-height: 100%to.Testimonial-5.I hope that helps! Keep up the great effort!!
Marked as helpful
0 - Fraser Watt• 1,790
@fraserwat
Submitted
Nice and straightforward, but I couldn't quite get the orange filter on the image after the hero section to match the figma files on this. The darker parts are much more defined on the original. Any suggestions on how to get there v much appreciated!
Also on forcing line breaks on titles in a few places is there a simpler way of doing this than with <span> tags?
Aside from those questions, any tweaks that could have been made v much appreciated!! 😎
Gregg Christofferson• 295@gchristofferson
Posted
Hey @fraserwat 🙋♂️
Nice job! Practically pixel perfect.
What I would do to fix your orange filter is remove all the styles associated with
image-filter::before. Then on.image-filterI would add the orange background color and the same border radius as your image. Then on your image I would addmix-blend-mode: multiply. You might add some opacity, maybe .75 to lighten the image up a bit too for a better match. Here's an example:https://codepen.io/Gregg-Christofferson/pen/qBXapGJ
Hope that helps!
1 - Carlos Guzman• 285
@guztrillo
Submitted
I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?
Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.
If you have any suggestion about my solution I would be thankful.
Gregg Christofferson• 295@gchristofferson
Posted
Hey @guztrillo! ✋
Excellent job! Looks really good!
I had a similar approach to the border-top as @markup-mitchell but instead of adding another level to the card markup, I opted for using the
::beforepseudo-element. Thanks to @markup-mitchell codepen example, I figured out what was wrong with mine. I needed to addoverflow: hiddento the card. Here's my example ->Marked as helpful
0 - CodingDuck• 390
@KaskaS-O
Submitted
Hi!
Any feedback will be great! :) I had one small problem - it seems that row gaps make the content overflow grid-container. Changing grid-template-row from auto to 1fr or anything else wouldn't fix it. I tried setting min-height too but no success. Any ideas? Thanks for help!
Kaska
Gregg Christofferson• 295@gchristofferson
Posted
Hey @KaskaS-O ✋
Great job, it looks really good!!
I looked at your code and the reason your testimonial boxes are overflowing the grid-container is because of
transform: translateY(10%)on your.opinions:nth-child(2)andtransform: translateY(%20)on your.opinions:nth-child(3).Instead try selecting
.opinions:nth-child(1)and setting `transform: translateY(-20%)'Then select
.opinions:nth-child(2)and settransform: translateY(-10%). Then adjust your row-gap accordingly. This way you are moving the elements inside the grid and not outside of it. Let me know if that works for you.Marked as helpful
1 - Vasinc Daniel• 190
@Vasinc
Submitted
I know that your time is limited and important, but it's going to mean a lot if you leave a feedback down below. Thanks
Gregg Christofferson• 295@gchristofferson
Posted
Hey @Vasinc,
Nice job using flexbox for your layout! Keep it up!
Just a couple of tips that might help you get your desktop layout closer to the design: Set a max-width on your .container somewhere in the ballpark of 1440px and use justify-content: space-between. Then set the width of .body and .img-container each to less than 50%. Flexbox will then use the leftover percentage and add spacing between your two containers. Lastly, put text-align: left on your .body container and remove that property from all the child divs. I think if you do this it will get your code to look closer to the design.
I hope this helps!
Marked as helpful
1 - Gregg Christofferson• 295
@gchristofferson
Submitted
Did I follow best practices for resetting my margins and by only adding margin to the bottom of elements?
What's the best practice for using rems, ems and px? I used rems for most things and px for the rest. The only place I used ems was on the padding for my buttons so that the size of the button would change proportionately if the font size was changed. How can I use rems, ems or px to make the code more accessible?
Gregg Christofferson• 295@gchristofferson
Posted
Awesome! Thank you again for taking the time to review my solution and offer these helpful suggestions. This will make decision making for future projects much easier.
1 - Edisan Ibisi• 50
@edy1013
Submitted
If somebody could explain to me why my background image in footer (for mobile view) is repeating? Thanks.
Gregg Christofferson• 295@gchristofferson
Posted
Try adding background-repeat: no-repeat to your .footer element. You'll want to also add background-size: cover, so the image fills the whole section.
Marked as helpful
0
