jdrodriguez2707
@jdrodriguez2707All solutions
- Submitted 8 months ago
Responsive landing page using CSS Flexbox with Mobile-first workflow
- HTML
- CSS
- 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; }
- 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.