@AReactDeveloper
Posted
Hello nice job on this challenge you have a slight problem with the way you included your CSS file you used (/) which will work fine on your machine i recommend using (./) dot slash when deploying to GitHub in order for your styles to appear on screen
this is a brief explanation of the difference between the the two types of slashes
-
./(Dot Slash):- Represents the current directory.
- Used to indicate that a file or directory is located relative to the current working directory.
- Example:
./images/picture.jpgrefers to a file namedpicture.jpgin theimagesfolder inside the current directory.
-
/(Forward Slash):- Represents the root directory in Unix-like systems (e.g., Linux, macOS).
- In a web context or when used in URLs,
/denotes the root of the domain or the base path of the website. - Example:
/images/picture.jpgrefers to animagesdirectory at the root of the domain.
@imbraian
Posted
Your comment was very helpful, thank you brother. Another doubt, how do I solve my problem of design in large devices? like desktop. @AReactDeveloper
@AReactDeveloper
Posted
@imbraian, I noticed that your design doesn't work well on very large devices. An easy solution is to set a max-width on your main area, for example, 1445px, to prevent it from expanding infinitely. However, this will cause your main area to float to the right side. You can fix this by centering it using margin: auto. Alternatively, you can use positioning or flexbox to center it.
it will look like this
main{ max-width:1440px; margin: auto; }
You can visit my own solution to this problem and read my code to see how I achieved it, but that doesn't mean it's the right or wrong way to do it. Kevin Powell made a very good video tackling this design if you are interested.
Also, I like your hover animation. That's a very stylistic touch.
If you found this helpful, please consider marking my comment as helpful. Happy coding!
