I was working on one of the projects for the training course, specifically the portfolio project when I stumbled upon a problem that I could not seem to fix.
I have a button like so:
with the class button-prop:
.button-prop {
width: 100px;
height: 40px;
}
The button worked perfectly fine, whenever I clicked on it, the button scrolled down to the div with the id about-section. However, I wanted to adjust the positioning of the button, so I added a margin to button-prop:
While the button moved right where I wanted to be, 700px to the right, the button no longer functioned. Clicking it no longer scrolled me to the about-section. Am I missing something, or am I not properly adding a margin to a button?
From what you’ve presented I can’t fathom why the link to #about-section is no longer working, but I can suggest an improvement for your code. Emdebbing a button element in an anchor element is not valid HTML5 according to the HTML5 Web Specification from W3C.
Getting rid of the button element and moving its classes and IDs to the anchor element is an option. [This] (https://stackoverflow.com/a/6393863/6114044) answer on Stack Overflow gives further clarification.
If the problem persists, maybe placing it in a CodePen and sharing it here would help me identify the issue.