mypetonthenet• 270
@mypetonthenet
Submitted
feedback welcome
retr0web
@retr0web
All comments
- retr0web• 250
@retr0web
Posted
Hi mypetonthenet!
A little tip on how to make a triangle below the share box (as it was shown in the design of active state), you can use ::after for the box with property clip-path.
That should make the triangle:
.share-box::after { content: ''; position: absolute; clip-path: polygon(100% 0px, 0px 0px, 50% 100%); width: 15px; height: 15px; bottom: -15px; background-color: (same as the box); }Hope that was something new and helpful!
Marked as helpful
0 - yagnik0• 420
@yagnik0
Submitted
Any feedback how to make my share box responsive to mobile design? Having hard time to implement it.
Happy Coding!🫡
retr0web• 250@retr0web
Posted
Hi yagnik0!
In my solution I took a bit tricky approach, but in short share box needs to change its "parent" in terms of position.
So for desktop, one element has position relative (in my case it's a share icon), so when we position the share box, it's relative to that element. For mobile, disable the position of share icon, and give the card itself position relative, so that way on mobile you can place the share box at the bottom of the card.
It may be hard to understand at first, but you can check my solution here, using the dev tools it'll become much clear.
Hope that helps.
P.S.: the share box stays in absolute position in both cases
Marked as helpful
0 @crwainstock
Submitted
How do you go about rendering one image for mobile and another for larger screens?
I've tried two different methods (<picture><source> in html as well as with basic JavaScript), but I haven't found the ideal solution. You can see more in my readme for this build as well as my previous Frontend Mentor build linked in the readme.
Thanks!
retr0web• 250@retr0web
Posted
Hi again Crystal!
About picture method, were you using media queries to set the source of the image?
I found it hard to work with picture before, but after doing some research it's a nice way to make responsive image.
The syntax looks like this:
<picture> <source media="(min-width: 1200px)" srcset="wide-crop.jpg"> <img src="close-crop.jpg" alt="…"> </picture>This method helped me through FAQ accordion challenge.
Here is a link more about using this method.
0- Fawziyyah Jimoh• 140
@Ziyyahh
Submitted
I feel like i could have done better, if you have any suggestions on how to complete this challenge better please let me know.
I also didn't position the background image properly and can't really figure out how to do that
retr0web• 250@retr0web
Posted
Hi Fawziyyah!
The property for background you are looking for is
background-size: contain;.On top of that you can add
background-position: top;.To learn more about backgrounds, visit this resource.
Hope it helps!
Marked as helpful
0 - Anthony Nguyen• 80
@AnthonyPA0902
Submitted
I love doing challenges on FE Mentor because it helps me improve my FE skils. I didn't have much difficulty this time except for that I don't know how to make the background change when switching to mobile. Anyone can provide the code for that ? Thanks so much for reading this
retr0web• 250@retr0web
Posted
Hi Anthony!
Background issue can be solved with media queries, where you change the url to background-image.
Additionally, I would suggest editing some of the properties, like bg-size, bg-position, bg-repeat.
Here is the link to resource you can use to solve the issue:
And as a tip, you can set bg-color as the other color that compliments background
As for solution this one worked for me:
body { background-image: url("./images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-position: top; background-size: contain; background-color: hsl(225, 100%, 94%); } @media (max-width: 960px) { body { background-image: url("./images/pattern-background-mobile.svg"); } }It's not perfect, but does the job.
Hope it helps!
0 @crwainstock
Submitted
Enjoy!
retr0web• 250@retr0web
Posted
great work. tip: if you set border-top size exactly as border-radius size, you can get round corners while having straight line underneath. example: .card-container { border-radius: 4px; }
#supervisor { border-top: 4px solid hsl(180, 62%, 55%); }
1
