Frontend Mentor | Ola's profile

All comments

@mh1251Submitted over 2 years ago

I had a little trouble with modifying the width of the svg for the divider, so for smaller screens I replaced it with just a horizontal line. If you have any suggestions please tell me, feedback is always welcome :)

Advice generator with Vanilla JS and CSS

Ola•160

@olamide203Posted over 2 years ago

Hi there. You did a good job, Keep up the good work

about the svg, you can have a div in your html and then use the svg as its background image

div. {
        background-image: url("pattern-divider-desktop.svg");
        background-repeat: no-repeat;
        height: 16px;
        background-position: center;
        background-size: contain;
    }

I hope this was helpful

Good luck and Happy coding!

Marked as helpful

Igor Nunes•45

@igornjSubmitted almost 4 years ago

the background image doesn't have a responsive alignment, when changing the size of the window browser.

the both background images (circles at the top and bottom) are at the #main id.

Responsive landing page with position absolute and relative

Ola•160

@olamide203Posted almost 4 years ago

Hi igor, nice work.

i would suggest you use css pseudo elements ::before and ::after for the background images. for the top background image you can use

body::before{
               position: absolute;
               height: 100vh;
               width: 100vw;
               background-image: url("....");
               background-repeat: no-repeat;
               background-position: bottom right;
               transform: translate(-50%, -50%)
     }

then for the bottom background image, it would be something similar with body::after instead of before.

you can have a look at [my solution] (https://github.com/olamide203/profile-card-component) for a better understanding

Happy coding!

Tioluwani Jaiye-Tikolo•130

@tjaiyetikoloSubmitted almost 4 years ago

I used float for the first time and also tried to make it as responsive as I could at 600px. But I had some issues with the layout at that width. If anyone could please give some feedback it would be highly appreciated.

Social Proof Section using HTML & CSS Flexbox and float

Ola•160

@olamide203Posted almost 4 years ago

Nice job Tioluwani, I would suggest you use the mobile first Layout approach in order to ensure that it looks good on small devices as well as large ones too.

Happy coding!