Skip to content
OverviewSolutions
10
Comments
6
jdrodriguez2707
@jdrodriguez2707

All solutions

  • Submitted 27 days ago

    Responsive and semantic recipe page

    • HTML
    • CSS
    1
  • Submitted about 1 month ago

    Responsive Social links profile using CSS functions

    #accessibility
    • HTML
    • CSS
    1
  • Submitted about 1 month ago

    Responsive blog preview card

    • HTML
    • CSS
    1

    I wonder if it's right to use the property aspect-ratio in this case. Does it have some effect on the images? For example:

    .author-avatar {
  width: 3.2rem;
  height: 3.2rem;
  max-width: 64px;
  max-height: 65px;
  aspect-ratio: 64 / 65;
}

    I'd appreciate any feedback about this. Thanks!

  • Submitted about 1 month ago

    QR code component with semantic HTML

    • HTML
    • CSS
    1
  • Submitted 4 months ago

    Coding bootcamp testimonials slider with some accessibility

    #accessibility#animation
    • HTML
    • CSS
    • JS
    0
  • Submitted 4 months ago

    Interactive rating component using React

    #react#vite
    • HTML
    • CSS
    • JS
    1
  • Submitted 8 months ago

    Responsive four card feature section using CSS Grid

    • HTML
    • CSS
    1
  • Submitted 10 months ago

    Responsive article preview component with a little JavaScript

    • HTML
    • CSS
    • JS
    0
  • Submitted 11 months ago

    Profile card component using CSS Flexbox

    • HTML
    • CSS
    0
  • Submitted about 1 year ago

    Responsive landing page using CSS Flexbox with Mobile-first workflow

    • HTML
    • CSS
    0
    1. I created several CSS style sheets depending on each screen width to optimize performance. My question is, can I have custom properties in one style sheet and then override its value in another style sheet? Or should I define the custom properties only in the base style sheet?

    For example:

    styles.css

    :root {
  --primary-background-color: hsl(257, 40%, 49%);
  --secondary-color: hsl(300, 69%, 71%);
  --text-color: #fff;
  --heading-font-family: "Poppins", sans-serif;
  --body-font-family: "Open Sans", sans-serif;
  --large-font-size: 2rem;
  --medium-font-size: 1.6rem;
  --small-font-size: 1.3rem;
}

    desktop.css

    :root {
  --large-font-size: 4rem;
  --medium-font-size: 1.9rem;
  --small-font-size: 1.4rem;
}
    1. How can I make a footer always visible at the bottom of the page regardless of the viewport height size? I mean, I know I can do it with position: absolute but that would cause the footer to be placed above the other elements when the viewport height is reduced, right? So I would like to know if there is another way to do it. I tested my website on mobile devices and you can't see the footer without scrolling, which is annoying because it is only a landing page and the footer only has social media icons and the attribution text.

    Thank you very much beforehand for your help.