@AnaesthCodeSubmitted over 2 years ago
- Is there a way of positioning the circles in the background image so they will scale and remain approximately in the same position when going form desktop to mobile without using mediaquery?
dewslyse
@dewslyseAll comments
- @frantecbhSubmitted over 2 years ago
I would like to understand why I couldn't put a border on the image at the top I used: border-radius: 8px; but it was only applied to the bottom of the image.
@dewslysePosted over 2 years agoHello @frantecbh
You need to set the padding on
.hYnCahto 1rem on all sides and delete thepadding-top: 1rem;you have set on.hYnCah imgMarked as helpful0 - @WissemhSubmitted almost 3 years ago
Any feedback is welcome!
@dewslysePosted almost 3 years agoHello @Wissemh, congrats on your submission. Your card looks good. Some things to note:
- The image on the card is not perfectly centred. This is because of 👇
.firstimg { width: 85%; margin: 2.5vh; }You should delete those properties and set a
max-widthon.firstimgto 100%.- You should also add a max-width (e.g. 375px) and some padding (e.g. 25px) to your
main. You can do away withwidth: 45vh;on the main because it serves no purpose. You could also do away with theheight: 75vh;and adjust the height of the card by applying some margins/padding to the elements on the card.
Happy coding!!
Marked as helpful0 - @tassieoshiroSubmitted almost 3 years ago
The first project done on my own, trying to get out of tutorial hell and it took so much time for a card component. Any feedback would be appreciated.
@dewslysePosted almost 3 years agoHello @tassieoshiro. Massive congrats on completing your first solo project 💪. Awesome job.
Some things to note:
- You could set a
max-widthon your.containerto prevent the card from growing unnecessarily big. This component has a max-width of375px. - Your page is missing an
h1. You could replace<h3>Equilibrium #3429</h3>with<h1>Equilibrium #3429</h1>
All the best and happy coding.
1 - You could set a
- @thanosballoSubmitted almost 3 years ago
Greetings to all
heres my solution.
Still in need for some modifications ,but pretty much thats it .
Cheers !
@dewslysePosted almost 3 years agoHello @thanosballo, congrats on your submission. Well implemented. Some things to note:
- Remember to include landmarks (e.g.
header,main,footeretc) in your markup. In this case you could change<div class="container">to<main class="container">. - Make sure headings increase by one. You could change
<h4>Annual Plan</h4>to<h2>Annual Plan</h2> - The order summary component is missing the background image
Happy coding!!
Marked as helpful1 - Remember to include landmarks (e.g.
- @Batareika007Submitted almost 3 years ago
I can't get the exact color on image like in the picture, how did you solve this problem?
@dewslysePosted almost 3 years agoHello @Batareika007, you can achieve the overlay by applying
background-blend-mode: multiply;to your.image-sectionHappy coding!!
Marked as helpful1 - @EliasFlorianSubmitted almost 3 years ago
Any quick and easy solutions for the speech bubble ? Created mine with a pseudo-element.
@dewslysePosted almost 3 years agoHello @EliasFlorian!! Congrats on your submission. Awesome implementation 👏👏👏
I found the use of a pseudo-element to be the easiest way of implementing the speech bubble. By the way, any particular reason you decided to keep the mobile version all the way to 1365px before changing the layout? The full width of the component on desktop is about 920px, meaning your layout can change sooner than at 1365px.
Also, your page is missing an
h1. You can add a screen-reader only h1 element to address the accessibility issue.Happy coding!!
0 - @Rohan-HazariSubmitted almost 3 years ago
If I have used any bad practice or if there is a better way of doing things any suggestion/feedback is appreciated.I struggled with this one quite a bit. Thank you
@dewslysePosted almost 3 years agoHello @Rohan-Hazari. Congrats on your submission. Awesome job. As a suggestion, you may want to set a
max-widthon your.containerto prevent your social proof section from spanning the full width of the screen on large devices.max-width: 1110px;should be fine. You should also change.attributiondiv tofooterso it's contained in a landmark element.Happy coding!!
Marked as helpful1 - @ATiarKSubmitted almost 3 years ago
There's one thing that I really confused. In the image hover, I used icon 'eye' from font awesome. My question is why the icons got the opacity similar to the container? Although in the design preview I see the color is totally white, but when I tried to increase the opacity icon only, it doesn't work.
@dewslysePosted almost 3 years agoHello @ATiarK! Congrats on your submission.
Following up on what @ninjacanthi1995 said,
- make sure the
<div class="icon">is not a child of<div class="overlay fade">. - Once you've done that, you can set the initial
opacityon.iconto0. - You can then alter the opacity on
.iconwith the hover selector
container:hover .icon { opacity: 1; }Hope this helps.
Marked as helpful1 - make sure the
- @ReandyxSubmitted almost 3 years ago
I added an animation of displaying message check the site before thinking i messed it up. If you like my work, leave a like:)!
@dewslysePosted almost 3 years agoNice job on your submission @Reandyx 👏. Looks very good 👍
0 - @ayhanbaciliSubmitted almost 3 years ago
I used grid to make texts and image near. Is there a any way to make purple opacity color on image?
@dewslysePosted almost 3 years agoHello @electricianman! You could also create the "purple opacity color" by using one of the <blend-mode> properties in css (
background-blend-modeormix-blend-mode).Marked as helpful1 - @zastar23Submitted almost 3 years ago
This is my second project in this community, I really like these challenges(still got a long road ahead) .
I would appreciate if someone could explain to me how I can align the title with the paragraph and with the columns?
@dewslysePosted almost 3 years agoHello @zastar23. Your
.titlehasmargin: 1em;. You need to adjust that within the media query@media (min-width:1300px).margin-left: 0.5emshould fix it. Also,.companies,.templatesand.queriesselectors needtext-align: leftHappy coding!
Marked as helpful1
