@Sdann26
Posted
Hi Farah!
I guess you don't know how to position the button so I'll help you with that.
To the parent box, in our case it will be advice-card since we will position it according to this, where the button is contained we will give position: relative.
To the button we will give the following attributes:
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(50%) translateX(-50%);
The idea is that with bottom it will be positioned at the bottom of the box and with left 50% it will be positioned to the left and 50% of the size of the box. Obviously it will not be centered so we add transform what this attribute does is to position according to the size of the box itself that is our button. then we translate it 50% down and 50% to the left and ready it is centered.
By the way there is the button tag so you do not have to use a div as button, if you change it add to the button the attribute aria-label="Change to advice" because as it will be a button with an image and without any text this will give you an error in the report and with the aria-label you would be adding an auxiliary text that is not seen but the screen detector detects it giving you 0 errors.
I would recommend you to give to the divider margin: 2rem auto 1rem auto so that there is not so much space between this and the button.
By the way change the <div class="container">`` to <main class="container">` it is absolutely necessary to have a main inside your body for the same reason I tell you to change it since this tag should always have the main content of your page.
Finally change that h3 for an h2 or span you cannot use a h3 without first using a h2 because the tags that are used for titles and subtitles have to go in increment without skipping any of them.
I hope my comments are helpful, they will help you to eliminate the errors in your reports and you can have 0 when you generate a new one.
Good Coding!
