Design comparison
Solution retrospective
I have designed my webpage and it looks good in desktop view. However, I am facing two difficulties:
Applying hover effect to divs and button: I am unable to successfully apply the hover effect to my divs and button elements. I have tried using CSS, but it doesn't seem to work. Could you please provide guidance on how to achieve the hover effect?
Making the webpage responsive for mobile view: I have attempted to make my webpage responsive by using media queries, but the layout doesn't adjust properly for mobile devices. Additionally, some of the content doesn't fit within the body in the mobile view. Can you provide suggestions on how to make the webpage responsive and ensure that all content fits correctly within the body in mobile view?
I would appreciate any assistance you can provide to resolve these difficulties. Thank you!
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
DECORATIVE SVG'S β¨οΈ:
- The
alt
attribute is used to provide alternative text for images in HTML documents. Thealt
attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.
- Now, when it comes to decorative
SVGs
, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.
- Since these images do not convey any important information or functionality, there is no need for an
alt
attribute.
- So feel free to set the
alt
attribute as""
for decorativesvg's
, becausealt=""
will be skipped by screen readers they will consider the image as decoration
Example:
<img src="images/decorative.svg" alt="">
<img class="logo" src="./assets/images/icon-reaction.svg" alt="icon-reaction"> π <img class="logo" src="./assets/images/icon-reaction.svg" alt="">
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @nicol29Posted over 1 year ago
Hi Dilshad,
Your end result came out great, I will try and help you with some of your questions:
- Applying hover effect to divs and button:
In order to apply a hover effect to div/buttons you must make sure to target the element with the correct css selector along with providing the pseudo-class
:hover
, in your case it should be:button:hover { /* Replace this comment with desired styles, these styles will apply once your mouse enters the view of the button */ }
For more info on pseudo-class elements
2.Making the webpage responsive for mobile view:
Try taking the mobile first approach when developing websites/components. I will give you an example using media queries, the following should be your styles.css file:
/* This will be default styling for the mobile */ main { display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { /* The styles in this media query will only apply once the screen size goes past 768px and upwards and will overwrite any styles apply to the main element */ main { flex-direction: row; } }
To add to this:
- Do not use fixed width/heights when applying styles (only in some occasions). Use
min-width max-width
along with percentages, what will happen if I hard code main's width to 800px and we view it on a mobile device? - Setting heights to element is not recommended unless you know it will not grow in size, by setting a fixed height your content may overflow.
- Keep in mind some html elements are already responsive to some extent such a
<p>
tags
This is a great resource to help you learn the basics of responsive design.
I hope this points you into the right direction.
Marked as helpful1 - @llr3v0llPosted over 1 year ago
I've looked at your page and couldn't see what "divs" you were talking about , but for the button part, I've added this to the end of your CSS and it seems to be working.
button:hover { cursor: pointer; background-image: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord