@Abu-Sman
Posted
Hello, @kharalhamza98. You're doing great; keep going. To solve your problem of buttons not being centred on a mobile screen, simply give them a width of 100% rather than a width in px. This way, they will never grow larger than their parent container. Also, make the images of the computer and devices 100% wide so they don't overflow the body.
Some suggestions for you:
- There is no need to include the header element within a section element. The header element is a standalone semantic html element. Your index.html file should look something like this:
<body>
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
- Read about BEM naming to learn how to name your classes.
- Avoid using "px" and instead use the "rem" and "em" units when building a responsive layout.
- Specifying the width of your images in % rather than px is gonna make your life way easier.
Marked as helpful
@kharalhamza98
Posted
@Abu-Sman Wow thank you so much! Sorry I am just getting to this, I was focusing on Javascript for a while and came back on here to refresh myself on html and CSS. You are right, I need to start moving away from px or EVERYTHING. It makes things harder than they need to be. Also THANK YOU for the button advice. You are awesome! I will look into BEM.
