Skip to content
OverviewSolutions
13
Comments
6
retr0web
@retr0web

All comments

  • retr0web•250
    @retr0webPosted 11 months ago

    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
    @yagnik0Submitted 12 months ago

    Any feedback how to make my share box responsive to mobile design? Having hard time to implement it.

    Happy Coding!🫡

    Article -Preview -Component

    2
    retr0web•250
    @retr0webPosted 11 months ago

    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
  • Crystal Rose-Wainstock•110
    @crwainstockSubmitted about 1 year ago

    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!

    Responsive Product Preview Card Component

    2
    retr0web•250
    @retr0webPosted about 1 year ago

    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
    @ZiyyahhSubmitted about 1 year ago

    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

    Order Summary component using css

    1
    retr0web•250
    @retr0webPosted about 1 year ago

    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
    @AnthonyPA0902Submitted about 1 year ago

    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

    Order Summary Page using HTML and CSS

    2
    retr0web•250
    @retr0webPosted about 1 year ago

    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
  • retr0web•250
    @retr0webPosted about 1 year ago

    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