Skip to content
OverviewSolutions
11
Comments
6
valeOopa
@valeOopa

All comments

  • valeOopa•280
    @valeOopaPosted 9 months ago

    Congratulations on completing the challenge!

    -I have made a Pull Request on your repository to show you a better solution. Note that I have left comments explaining some things I have changed. The logic of the project is very good.

    -Here is the code with your fixes, click

    -PD: sorry if some things are not understood, I don't speak much English, hehe.

    Marked as helpful
    0
  • valeOopa•280
    @valeOopaPosted over 1 year ago

    Hello!

    You could create a section and insert the "background-image: url("my_url.jpg")" property into it and by using a media query, you change the url of the background-image. You can also use JavaScript to change the url directly from the <img> element.

    Happy Coding!

    0
  • braasantos•40
    @braasantosSubmitted over 1 year ago

    Still have some difficulties with the responsiveness of the website, spent hours but it was just not working maybe bc i used the position absolute and relative when displaying the text and image. Can someone tell what should i do in the next pratices that can help me.

    Static Website

    1
    valeOopa•280
    @valeOopaPosted over 1 year ago

    ¡Bienvenido a Frontendmentor! Mire tu código y vi que pusiste la clase "numeros" asi que te hablare en español jajaja. Aparte, otra cosa que vi es la forma que posicionas y divides las cosas, te dejaré algunos consejos a continuación:

    1. Aprende a utilizar mejor Flex: utiliza propiedades como flex-direction, align-items y justify-content. También, investiga conceptos como el cross-axis y main-axis.

    2. Evita posicionar elementos de forma tan excesiva con position: No quiero decir que posicionar algunos elementos con position y darles propiedades como top y right sea malo, pero si vas a posicionar TODOS los elementos asi, va a ser muy estático y tendrás que utilizar muchas media queries y adaptar muchas resoluciones. Para esto existe Flex, viene a solucionar este problema y nos ayuda a posicionar los elementos de forma mas flexible.

    3. Empieza a utilizar medidas como % y EM: Esto para que se vaya adaptando mejor las distintas resoluciones, también todo esto tiene su pequeña teoría y recomiendo que te lo aprendas.

    4. Divide mas tu pagina: Note de que pusiste la imagen en un mismo contenedor que el texto y botones, trata de ir dividiendo mas tu contenido y darle forma. Puedes, por ejemplo, abrir el diseño del ejercicio e ir dividiéndolo en paint con cuadrados, asi te vas dando una idea de como será la estructura y el estilo.

    Si hablas español, te recomiendo mucho este curso, es demasiado completo, muy bien explicado y tiene todo lo que necesitas en el menor tiempo: https://www.youtube.com/watch?v=OWKXEJN67FE

    Entiendo perfectamente que todo esta puede llegar a ser abrumador, pero se constante, puede aprender todo esto y más, dedicate un tema a la vez, practica hasta que te sepas bien las bases y veras como en un futuro todo esta te será sencillo.

    ¡Happy Coding!

    1
  • valeOopa•280
    @valeOopaPosted over 1 year ago

    Thanks for the tips and solutions! I was stuck with overflow, I'll change the code and add some styles.

    0
  • Luis Soto•80
    @walkerlynaSubmitted over 1 year ago

    What can I change to make it look better on mobile? I feel like the image is too big and needs to be adjusted. Thank you.

    Challenge#4-Perfume

    2
    valeOopa•280
    @valeOopaPosted over 1 year ago

    Congratulations on completing the challenge, that's great!

    As for the photo you could do this:

    Add to .perfume object-fit: cover; height: 100%; width: 100%;

    and add in @media .perfume: max-height:300px;

    Object-Fit serves as a property to adjust your image depending on the value you pass to it. Also, we use a max-height 300px to limit the height of the image, and finally, we say that it fills 100% of the container, so that it is displayed correctly.

    Happy Coding!

    0
  • valeOopa•280
    @valeOopaPosted over 1 year ago

    Congratulations on completing the challenge, that's great!

    You could avoid using <div>, and use tags like <main>, <section> or <article> to structure your website (This is called Semantic HTML).

    And regarding Bootsrap, this depends. If writing native CSS code is difficult for you, I recommend that you study and practice native CSS code, that is, not using Bootsrap. This so that you understand what is done when styling the web. There are many comprehensive CSS courses on YouTube.

    Bootsrap can be a good tool for styling your page, but I don't recommend using it if you don't understand or have trouble writing CSS code.

    Happy coding!

    Marked as helpful
    0