Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments12

All comments

  • Mehmet• 285

    @memsbdm

    Posted

    Remove your margin in ypour .flex-container and add : display:flex; justify-content:center; align-items:center; min-height:100vh; in your .container class it's going to center your box without margin !

    0
  • Mehmet• 285

    @memsbdm

    Posted

    in your .image-section and .feature-wrapper add : width: 50%; remove overflow hidden, change right: 2em; to something like left: -20px; and the monitor will be always at the left :)

    1
  • Rizwan Mustafa• 155

    @rizwanmustafa

    Submitted

    I fixed the background svg position problem using flexbox and simple code lines. I don't think the solution to this problem can be as simple as this but if you have better code, you are welcome. If you see any mistakes I did or any improvements I can make, I will be happy to see your feedback.

    Profile Card Challenge using Flexbox

    2

    Mehmet• 285

    @memsbdm

    Posted

    You can use background in css for svg. It would be easier :)

    2
  • Sirena Alyce• 10

    @SirenaAlyceDev

    Submitted

    I could not figure out how to get the background image circles positioning correct. Can anyone help with that? I also noticed that some of my bootstrap classes and stylings aren't showing when deployed via Vercel. Can anyone help with that also?

    Profile Card using Bootstrap

    2

    Mehmet• 285

    @memsbdm

    Posted

    Bootstraps is not necessary for a little project like that. Use CSS it's so much easier. But if you already can do it in CSS and want to improve your Bootstrap skill it's different.

    0
  • Mehmet• 285

    @memsbdm

    Posted

    corrected display on git, try https://corrected-clip.vercel.app if you have a display problem on your device please comment !

    0
  • Sahil kakwani• 10

    @sahilkakwani9

    Submitted

    I know this site has glicthes and i am not able to solve them as im a beginner.so,please help to remove those if u can.

    Personal Profile Card

    3

    Mehmet• 285

    @memsbdm

    Posted

    Hi,

    first use border-radius:50% on your picture to do a circle. You can use border: 2px solid white on it after.

    Use overflow:hidden.

    Don't forget to include the font in your html file in the header.

    It should solve some problems !

    1
  • Mehmet• 285

    @memsbdm

    Posted

    Hello !

    You can use box-shadow for your button like in design.

    Instead of using margin for your container you can display flex your .main then justify-content : center and align-items: center it would be easier and centered. (if you put height:100vh for your main too).

    You can also look at your media queries because when we reduce the window it is not optimized.

    Hope it helps :)

    1
  • Tereza• 605

    @sirriah

    Submitted

    Hello, this is my first upload on Fronted mentor. I look forward to your comments. I have some questions:

    • I try to look at it on htmlpreview.github.io, but it takes ages to display it with css. Why? I think that it is caused of background-position in ".main". It calculates positions of those circles on background and it keep them responsive. Is my assumption right? What is the better solution than calc()?

    • What is the best way to display those circles on the background? First, I tried to add svg tags directly to the html, but at last, I added them into the css file as background-image.

    • What tags should i use for the "London, 80K Followers..." etc.? I looked at some solutions from another users and they mostly used p tag. But it is not the "real" paragraph, it is only one or two words. Could it be simply a div?

    Thank you

    Profile card component using Sass

    3

    Mehmet• 285

    @memsbdm

    Posted

    Personally for the background I put them in html then I used transform : translateX() translateY() it's easier I think ! I am also interested to know which tag use for London ...

    0
  • Mehmet• 285

    @memsbdm

    Submitted

    First time trying Grid. I have some questions about it.

    1. How can we use Grid without fixing an height for the section ?
    2. How can I place the picture and the name because when I use all displays there is always a problem -> name and "verified graduate" are one over the other but below the picture and I think using position absolute for the picture is not the solution.
    3. For responsive how can I configure heights of the containers ? If I use 1fr it should work only with an explicit height.. I tried to fix a height like 100% or 200vh but not working (maybe fixed height px?)

    Questions about this challenge

    1

    Mehmet• 285

    @memsbdm

    Posted

    Design comparison seems good but look the site there is a lot a problems !

    0
  • Mehmet• 285

    @memsbdm

    Submitted

    My third work using Flexbox, I put all cards in position : absolute and then with a transform : translate I placed them. If there was an easier solution you can comment !

    CSS Flexbox

    3

    Mehmet• 285

    @memsbdm

    Posted

    I forgot to remove a margin-top that's why cards are a bit down :/

    2
  • Mehmet• 285

    @memsbdm

    Posted

    For the background you can put them in display : absolute then do a transform : translateX() translate(Y) to move them where you want like in the design !

    1
  • Mehmet• 285

    @memsbdm

    Submitted

    My first integration using flexbox !

    CSS Flexbox

    2

    Mehmet• 285

    @memsbdm

    Posted

    I didn't put alt in images because it was just a design, I will do it for my next works here. Also the design is not exactly the same without Figma ! :)

    0