All comments

• 

  Deepali Panchal• 310

  @Deepali25-K

  Submitted 7 months ago

  Deepali here, presenting my solution for this challenge. I would appreciate any feedback or suggestions on how to improve the code and eliminate any unnecessary components.

  Thank you!

  

  Base Apparel Coming Soon Page [HTML + CSS + JS]

  1

  70

  

  valeOopa• 280

  @valeOopa

  Posted 7 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

  This comment has received 1 replyShow
• 

  JDMartinezDev• 100

  @JDMartinezDev

  Submitted over 1 year ago

  It is there a way to switch the image by not using the display:none ?

  

  Product Preview Card Component

  2

  80

  

  valeOopa• 280

  @valeOopa

  Posted 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

  @braasantos

  Submitted 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

  50

  

  valeOopa• 280

  @valeOopa

  Posted 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

  This comment has received 1 replyShow
• 

  valeOopa• 280

  @valeOopa

  Submitted over 1 year ago

  Hope you like! :)

  

  Article preview component. Responsive Design & Clip-Path!

  3

  50

  

  valeOopa• 280

  @valeOopa

  Posted 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

  @walkerlyna

  Submitted 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

  50

  

  valeOopa• 280

  @valeOopa

  Posted 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
• 

  PulsarXray89• 40

  @PulsarXray89

  Submitted over 1 year ago

  I am unsure about my approach. I like bootstrap but I find it a little difficult to customize. Should I move forward without bootstrap using pure html / css or is bootstrap ok to use?

  

  Responsive product card using HTML CSS Bootstrap 5

  1

  60

  

  valeOopa• 280

  @valeOopa

  Posted 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

  This comment has received 1 replyShow