Responsive landing page with mobile nav and dropdown nav

@crsimpson5 Thank you Curtis, really helpful feedback here. My replies:

1. I kept reminding myself to add the arrow style changes and knew something was amiss when doing my final check, but I was just getting crosseyed from all the troubleshooting and thus missed the arrows. So thankful you spotted them! (Update: I just realized what you mean about the pointer! Sorry, total brain fart from staring at code too long to actually comprehend English anymore. Will fix this!)

2. Thanks for catching this one; I just changed them to display: inline-flex to center them and also added a custom prop, so hopefully that fixed it . Do let me know if you still see the issue there.

3. More line height added for attribution on mobile

Thanks again, and I appreciate the check and feedback! Keep 'em coming 😊

@Aik-202 Hi Assurance, thank you for reviewing! I just checked out the issues you mentioned:

1. About "Designed for the future", I'm looking at this on my phone but it's on one line, and I checked in the inspector just now, it needed a screen width of 340px for it to wrap to the next line. What's the browser you're using and the device you're viewing it from? Or do you mean it overflowed off the screen?

2. About the subheadings and paragraphs, I'm comparing what I'm seeing on my mobile phone with the mockup design right now and they look the same. The font-size is just small on this design sadly, and that's one of design choices I questioned when I was putting this together as I mentioned in my writeup. (Really not a fan of this design in case you can't tell 😅)

3. About the images being too big, if you mean the images overflowing off the screen, that is part of the design. In any case because my mobile SVGs weren't displaying on my phone and on Chrome, I changed the img tag to a picture tag for handling responsiveness, so see if that makes a difference. The only thing that's different for me is, the laptop SVG can't overflow off the screen when I'm using picture.

About the dropdowns, were they not working at all or just a bit sticky? I had a setTimeout on them as I wanted a bit of a delay when they disappear; anyway I removed that, so see whether it makes a difference.

Thank you once again!

@elaineleung I've reviewed the site. By the way, I was talking about the "desktop side mode" on mobile, I'm using the chrome browser. But you've solved the problem. 😅And it's like removing the setTimeout you were able to solve the issue with the drop-down menu as well. Every other thing is okay as well. Well done!!!!!!

And you are welcome, glad to be of help.

@Aik-202 It turns out setTimeout wasn't causing the issue; it took awhile to find the problem, but basically I needed to use stopPropagation(), plus there was some logic in my functions that needed rewriting.

Desktop side mode on mobile? You mean, viewing the desktop version on a phone? If so, that's an interesting choice...!

@elaineleung Okay, alright, glad you were able to figure that out... Yes, desktop site mode on phone, I think only chrome has that feature.

@Senkuu-Midoriya Thanks for checking out my work, aDev 🙂

About the "start for free" button: I can't seem to see an outline when the button is hovered over and then the cursor is removed, and I tested this on Firefox, Chrome and Edge. I also don't have an outline for my hover state; I just have an outline for my focus state, which means there would be a dotted outline that shows up if you clicked on the button and then don't click anything else after. Can you let me know which browser you're viewing it in?

About the second part of the webpage not positioned a bit askew: I'm having some trouble understanding this; are you talking about the laptop image, or are you talking about a specific section? Do you mean a part of the image is not cut off when it should be cut off? If the browser width is 1440px, then you should be seeing what's in the screenshot (where a part is cut off), but for widths below and above that breakpoint, there will be some differences. Or are you seeing overflow happening in that there's a horizontal scrollbar that appears? Anyway, please describe for me a bit more what you're seeing or what the issue is!

About your questions:

1. I think you can check out what I did in the CSS; I basically just used the background-image property and then added the linear gradient background and then combined it with the image, since gradients are considered as a background image. Positioning the image took some time, and I'd say the MDN docs helped a bit in showing me which values I could try.

2. For the JS in the dropdown menu, I toggled the aria-expanded attribute whenever the button is clicked on, and based on whether that is true or false, then the dropdown would get a data-visible attribute, which would display or hide the content. This is to ensure the content is completely hidden from screen readers even when the dropdown itself is not visible. Also, the styling is controlled by the CSS depending on the attribute or the state of the attribute (i.e., true/false).

Hope this helps you out a bit!

Hi @elaineleung, thank you so much for taking the time to read through my message, as for the outline I am currently using Brave as my browser, and for the image below the Designed For the Future header, in the design it is shown to be overflowing of off the screen however in yours it is not, however that is not a very big issue and the webpage is still wonderful. I apologize for any misunderstanding.

Thank you for sharing with us how you positioned the background image and for the JS dropdown attribute. I will make sure to apply those tips in my next project.

Thanks, aDev

@Chaffexd Hi Shane, thanks for reviewing! Were the dropdowns showing up at all on your phone, or was there just a delay? I tested it on my phone and it worked OK (I'm using a Motorola). Like I mentioned to Assurance above, this could be due to the setTimeout on my dropdown navs, and I've removed them now.