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

Treinando para colocar em tamanho mobile

@PatrickDzS

Desktop design screenshot for the Blog preview card 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?

De ter centralizado os conteúdos no centro para mobile, que acabou faltando no outro projeto.

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

Centralizar os conteúdo no centro para mobolie em tamanho de resolução de 375px.

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

Deixar o código mais semântico.

Community feedback

EFEELE 350

@EFEELE

Posted

to center your parent element use flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

body{ width:100%; height: 100vh; /*vh = View Height | this is to adjust the body of the page to the total size of the screen / display: flex; /With this we convert the body into a flexible box that will allow us to add the following attributes/ justify-content: center; / con este atributo centramos el elemento de manera vertical distribuyendo los espacios vacios / align-items: center; / con este atributo centramos el elemento de manera horizontal */ }

Add the following to your footer:

footer{ position: absolute; /* With this the position of this element will be independent of the others./ bottom: 1rem; / and with this we position it below everything with a space of 1rem */ }

You will have to clean up some properties that you assigned to position your elements, try the code that I provide, and review my code from the same project hoping that it will help you and that you will be able to understand it.

success!! https://github.com/EFEELE/Blog-preview-card/blob/main/index.html

Marked as helpful

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