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

Submitted

Profile card using flex

@Isabela-Fernanda

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

.

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

PT Eu gostaria de saber se tem como posicionar o background do mobile de uma maneira melhor, ele fica bom quando está na lagura requerida (375px), mas não fica bom conforme a largura vai aumentando.

EN I would like to know if there is a way to position the mobile background in a better way, it looks good when it is at the required width (375px), but it doesn't look good as the width increases.

Community feedback

@R3ygoski

Posted

Olá novamente Isabela, parabéns pela conclusão do seu projeto que ficou muito parecido com o design proposto, parabéns.

Sobre sua duvida, existe uma forma, que não sei se ela seria o que você está buscando, mas você poderia colocar as imagens dentro de dois containers separados, exemplo <div>, e então você definiria a posição dessas <div> por meio de uma propriedade position:absolute. Essa forma acredito eu que seja a mais fácil de fazer com que fique mais responsivo.

As duas imagens elas começam a crescer pro centro da tela, isso ocorre devido as medidas relativas que você utilizou, que foi %, você poderia utilizar pixel para a imagem de cima, e viewport para a parte debaixo, dessa forma elas não iriam mais crescer pro meio da tela. Ficaria assim por exemplo:

background-position: -625px 190%, 55vw -95%;

Mas bom, no fim das contas a melhor solução que eu achei pra esse desafio é realmente utilizando position, não sei se teriam outras formas que são mais eficazes.

Caso você encontre outra forma, que ache mais eficaz, por favor comente abaixo que eu gostaria de verdade de saber se existe alguma outra forma de posicionar melhor essas imagens abaixo, porque eu tive bastante dificuldade com essa parte, e de resto é isso. Caso tenha ficado alguma duvida quanto ao que eu disse, já sabe, só comentar abaixo.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord