@elaineleung
Posted
Hi Shane, first of all, great work here, as this challenge can be a difficult one with many parts to put together. I'll try to answer your questions:
About the jumpy dropdown nav button, I think it has something to do with the arrow, because that's the element I see that's disappears so slightly and then reappears. I see in your code that when the .dropdown--active class is toggled, the only property in the active pseudo element is the url in the content property. You can try either adding a display: inline-block to the .dropdown__link::after selector (since this is all in an a element, it's has a display:inline, and height has no effect), or you can copy the properties from the .dropdown__link::after selector and paste it in the active selector. However, instead of using this as your final solution, I actually suggest you to change the two dropdown titles into buttons instead because these are not links. Links are for navigation, and these two titles are only performing the action of toggling a dropdown.
One other suggestion I have is to add object-fit: contain for your image, as its aspect ratio is being changed when resized, causing it to be a bit distorted right now. Also, there seems to be overflow happening where the content on the right becomes covered by the browser; I can't really figure out what's happening, but anyway, as a temp fix you can try changing your breakpoint, but it would be good of course to see what the root cause is. Anyway, good luck! 🙂
@Chaffexd
Posted
@elaineleung Thanks so much for your feedback, I just made the changes from a tags to button tags and have been playing with the content for about 2 hours and just cannot figure out the jumpy drop down, what's weird is that it's ONLY on the initial first click, otherwise it doesn't happen.. Maybe one for another day :)
@elaineleung
Posted
@Chaffexd Have you tried putting the arrows in the HTML with a span tag instead of using pseudo elements? Another possible culprit I thought of was the order of your CSS rules; It's usually good to start with the custom properties first, then the resets, and then everything else. I don't normally change the html font size but if you do, I think you should keep that near the very top; you might have to do a search to see which placement is best.
