Hi @Problem-solver ,I have just revisited your suggestions and compared with my own efforts. I went through line by line at least three times and adapted my html and css to match your effort. Brilliant results so thank you but this has been more useful than just solving the issues on the page…I have taken it as an opportunity to read up again on using rem (and how important that is), will also make note to use
more freely as this seems to have organised the elements better…I have revisited the use of class & id which has been useful to confirm and remind myself of their functions. Finally, I looked up Order property in css as this seems to have been very helpful. Really interesting to read about and I look forward to trying to use it myself. I dont know if you are aware though ( and this is my attempt at giving back to you
) but it is not always recommended for accessibility to use Order.
This is taken from the MDN website…
order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.’
So I wonder how you would suggest doing it without using the order property. I heard that only 2% of websites are accessible to the kind of users referred to above. Anyhow, that tiny bit of knowledge is an attempt to reclaim something of credibility - thanks so much for your brilliant help! Look forward to your next sites and challenges.