@aravindhan7
Posted
Hey the solution is pretty good, its now time for you to take on to add mobile responsive codes in your upcoming challenges, kindly dont skip the responsive part,..learn about media queries. (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries)
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:
@media only screen and (max-device-width: 480px) { }
We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules.
Hope this helps!..
Marked as helpful
@Ashok-Kumar-dharanikota
Posted
Hi @aravindhan7 ,
Thank you for sharing your insights on responsive design. That is really helpful and I have another query too. we have two banner or cover images, right based on the screen change how is it going to be changed? I tried a background image but it didn't come with the desired width and height and how to identify a font based on the design Is there any website where I can find fonts easily by typing and comparing them with the design and the last one is how to identify the color patterns ?. they may be small doubts but it will help me to stay in a long. I truly appreciate your suggestions in it.
Thank you.
@aravindhan7
Posted
Hey @Ashok-Kumar-dharanikota Happy to see your response,
First of all, you have already designed the desktop version right, so now you are going to add
@media only screen and (max-device-width: 480px) {
/*you need to write the CSS code for mobile screen changes*/
}
so inside the media query, you need to change the size of the image, and every other necessary thing needs to be corrected for the mobile device.
The Fonts-family, font-weight & colors for the design will be presented in the starter file itself named style guide. Kindly check and let me know.
