Order summary component

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola Dilinyer!

  Para el color hazlo rápidamente con esta propiedad background-color: hsl(225, 100%, 94%)

  Por cierto dale las propiedades de fondo al body sin miedo y cuando achiques la pantalla cambia el fondo mediante media queries.

  Marked as helpful

  1

  ---

  

  DilinyerCR•330

  @DilinyerCRPosted over 2 years ago

  @Sdann26 gracias compañero! Voy a probar eso a ver que tal ✌

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @DilinyerCR Por cierto lo acabo de revisar y todo bien, solo falta el cambio en el fondo para el diseño mobile. Por cierto no te lo mencioné creo pero puedes usar la propiedad transition para los elementos en tu página que cambien de un estado inicial a uno final así el cambio de color no se da tan brusco. Así como transition: all 300ms, el primer valor es para la propiedad y el otro para el retraso aunque tiene más, esto le puedes aplicar a cualquier elemento con :hover, :active, :focus, etc. Aplícalo te quedarán maquetados más profesionales.

  Marked as helpful

  1

  

  DilinyerCR•330

  @DilinyerCRPosted over 2 years ago

  @Sdann26 gracias bro, como hago para el cambio de imagen para el diseño móvil? Eso es con media queries?

  Si, pensé en ponerle transition al cambio en los colores con el hover pero luego pensé que en ese caso no sería necesario, crees que si lo es?

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @DilinyerCR mmm puede que me equivoque pero lo escribiré aquí.

  Como estas tomando primero el fondo de escritorio tu quieres que cuando se achique y pase ciertos pixeles se cambie digamos 460px entonces:

  @media screen and (max-width: 460px){
     main {
         background: url(/images/pattern-background-mobile.svg)no-repeat top/contain;
     }
  }
  

  Lo que dice esta línea es que aplicara los estilos de ahí a lo máximo 460px, entonces ocupara de 0 a 460px.

  Y bueno ahora solo le damos el estilo que deseamos cambiarlo, los demás se mantienen.

  Ponlo al final de tu hoja de estilos.

  Lo de tu pregunta ultima lo de las transiciones depende de lo que creas que se le ve mejor y casi siempre las uso en todo lo que tenga estados.

  Marked as helpful

  1

  

  DilinyerCR•330

  @DilinyerCRPosted over 2 years ago

  @Sdann26 ok, gracias, voy a probar. 👍

  1
• 

  Umair•240

  @umairanwerPosted over 2 years ago

  Hi, good work on the project. Regarding your query there are a few modifications you need to do in your CSS.

  • In your main class set the background to: background: url(/images/pattern-background-desktop.svg)no-repeat top/contain;

  • What this will do is push your image to the top and contain will force the image to display completely without any cutoff.

  • Now set background-color to pale blue.

  • Finally change your height to 100vh.

  Hope this helps. Feel free to ask any questions.

  Marked as helpful

  1

  ---

  

  DilinyerCR•330

  @DilinyerCRPosted over 2 years ago

  @umairanwer Thank you very much, I will try that.

  0