After years of working as an English translator and teacher, in 2022 I started focusing on learning something that embodied my passion for crafting and building, technology, and working with graphic elements all in one package: front-end web development.
I’m currently learning...Electron.js, Rust!
Latest solutions
Interactive Comment Section (Full Stack CRUD)
#express#postgres#react#sass/scssSubmitted almost 3 years ago
Latest comments
- @gbabohernest@sahand-masoleh
Hi Ernest,
Regarding your problem, I don't see any :hover selector on your hamburger button, if you have been trying to no avail, it's because your SVG has a
fill: none
set in it, that takes precedence over everything you write in CSS. - P@YelemyahM@sahand-masoleh
Hello!
You most likely need to edit your SVG, as any styling defined in there has the highest specificity.
If you want to be able to control the color through your CSS or JS file, a common tactic is to set the fill or stroke in your SVG to
currentColor
so that it will follow the container.Also, if you're using an SVG inliner with Webpack for example, you can directly alter fill and stroke provided that they're not defined inside the SVG file.
- @JerryWski@sahand-masoleh
Hey Jerry! Good job!
First things first, you have set a
min-height: 150vh
on your page, I'm guessing you meant to do 100vh to be able to center the content on the page. But even then, that's the wrong approach, vh units include the address bar on mobile browsers and it will push everything down. Useheight: 100%
on html and body elements and then you can use percentage units to maximize the main container withmin-height: 100%
Regarding the theme toggle, I think a checkbox would've been a better choice than two radio buttons, both for you and for the user. It's a tad bit hard to click on right now.
Marked as helpful - @redpangilinan@sahand-masoleh
Hey Red Pangilinan, nice job and welcome!
First things first, your solution looks really good, exactly what the design wanted.
Your footer does look a bit over-engineered, but nothing crazy. What you can do is after you're done, open up the console and turn CSS properties on and off, if it doesn't make a difference it doesn't need to be there.
For example, the container for your social icons has a margin bottom, even though the content are at the top anyways, you can see that turning off that property doesn't change anything.
But don't worry about long HTML, that's the nature of a markup language. There may be some room for optimization, but you'll get there with time.
Edit: By the way, if you want to have an easier time with naming your classes, you may want to look into BEM, or other conventions like it.
Marked as helpful - @NJVS@sahand-masoleh
Hi lieneil! Really good solution!
About your question, you can also use a grid with
grid-auto-flow: column
and then setting yourgrid-template-columns
to repeat withauto-fit
.Also, don't use height: 100vh on your pages because the moving address bar of mobile browsers is included in it and it will push everything down. Use
height: 100%
on the "parents" of the element that you want to cover the page, and thenmin-height: 100%
on that element.Nevertheless, you don't even need that for this page, since it doesn't have a vertically centered element.
One more thing, you don't need to set
height: auto
on elements, it is by default set to auto.Marked as helpful - @RemoRemo11@sahand-masoleh
Hello again Remoan! How are you doing?
It's a challenging layout for sure, that monitor sticking out needs some creativity.
You can't change the color of the SVG because it has a color hard-coded into its code and that overrides anything you define in CSS. Change the
fill
property tocurrentColor
in your SVG and set the color with CSS with thecolor
property.Your use of the main component is correct, but like I said about your other project, I would give it a max-width and center it, right now it grows forever and throws your
cont
element out of center.Marked as helpful