Tell us what’s happening:
Describe your issue in detail here.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; ASTRO Build/OPM2.171019.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge:
We can’t see the image. And you have a lot of errors in the code that you really need to fix first. Use a validator (HTML/CSS), or use the built-in one on Codepen (click the down arrow at the right of the code boxes and select the Analyze option).
Don’t use position absolute for the image, and try not to place elements using positioning at all. Unless when it is needed for specific designs, such as element overlap or other layouts where you have to use positioning or negative margins. Use margin and padding as much as possible to make any small adjustments to the position of the element.
Make the image fluid and have it respond to its parent container.
Most times, with small logos you just set a fixed max-width that you can adjust as needed in media query for different screen sizes. As long as it has the correct proportion in relation to its container size (often a header or nav) it will work. It rarely needs to scale up or down.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.