Responsive Profile Card using HTML, CSS and Flexbox

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  hello my dear friend ♥ a big problems your card have in my device (desktop) i have a lot of scrolls and it's better at first hidden the over flow or change something which is scrolled your card i think it's your ::after but like you i was have problem with that backgrounds too and with a searhc you can find out vw and vh in this card it's not bad and you can use it

  Marked as helpful

  1

  ---

  

  pszponder•55

  @pszponderPosted about 3 years ago

  @CyrusKabir Thank you for your suggestion, I did not even notice the scroll bars initially! I added overflow:hidden to my body element to remove the scroll bars due to the pseudo-elements.

  1
• 

  moises Portgas•40

  @Patt0linoPosted about 3 years ago

  Boa noite, no meu projeto eu utilizei o backgroud-position, é só colocar a % negativa que a imagem sai do viewport.

  Na minha solução usei esse código:

  body{

  background-color: hsl(185, 75%, 39%);
  
  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  
  background-size: 600px 600px, 600px 600px;
  
  background-repeat: no-repeat, no-repeat;
  
  background-position: -100% 150%, 150% -100%;
  

  }

  Nas tags tem uma virgula para associar as caracteristicas a segunda imagem de fundo.

  0