Responsive landing page with mobile nav and dropdown nav

Community feedback

• 

  Curtis Simpson•550

  @crsimpson5Posted about 2 years ago

  Hey Elaine, great job on your solution! You handled the element positioning really well, and it looks great on any screen size. A few tiny things you could improve:

  1. The dropdown arrow icons show a pointer, but they can't open the dropdown.
  2. The first cta button is getting stretched since the second one has a border, so the text isn't quite vertically aligned. It's only 2px off, but if it was a bigger border it would be more obvious. To fix this, you could use a custom property on the cta class for the border color and have it default to the background color.
  3. The attribution at the bottom could use a bit of line height on mobile.

  Your solution is nearly perfect, so I could only find some tiny improvements 😛. Well done!

  Marked as helpful

  3

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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 😊

  3
• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  Hi Elaine, Nice work! You did justice to this!. The responsiveness is on point, but I have some suggestions: 1.) For the desktop site view on mobile... The text "Designed For The Future" overflowed to the next line.. try adjusting it so it takes up a single line. 2.) Then the sub headings "Introducing an exrensible editor" and "Robust...", Try increasing their font size and reducing that of their respective paragraphs... 3.) For Mobile normal screen the images seem too big, I advice you reduce them a little. And the drop down menu for Products, Company, Connect... Seems to have an issue displaying the contents appropriately... Try checking the JavaScript functions that activates that feature, I think that might be where the problem is coming from.

  Marked as helpful

  2

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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!

  1

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @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.

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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...!

  1

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

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

  1
• 

  aDev•280

  @Senkuu-MidoriyaPosted about 2 years ago

  Hey Elaine, amazing website that you have done here, the design and you webpage are pixel perfect, it is so hard to get it that way, and it surely must have taken a lot of effort, but it shows in the webpage, which looks amazing. If I may, the start for free button, when it is hovered everything works fine, but when you take the cursor out of the button the outline from the hover affect still stays. Also the image in the second part of the webpage is not positioned a bit askew, in the design some of the picture is cut of, I would suggest that you apply an overflow hidden on the body, and add a padding or margin the picture or the text next to it depending on how your code is formatted.

  If you don't mind I would love for to answer these questions of mine relating to the webpage: 1. How were you able to but the background image on top of the hero. 2. How were you able to apply the JS for the dropdown menu. Any answers to these questions is invaluable to a newbie like me, to gain knowledge from an experience web dev like you. :)

  Thank you for sharing this webpage with use and allowing us to learn thorough it, aDev

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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!

  1

  

  aDev•280

  @Senkuu-MidoriyaPosted about 2 years ago

  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

  0
• 

  Shane Chaffe•900

  @ChaffexdPosted about 2 years ago

  Hey Elaine! Another great project. It's clean, responsive and works well. One thing I noticed when I checked mobile view is that the dropdown doesn't show the li items as expected. You can check this here: https://snipboard.io/OBfs2U.jpg

  That's the only thing I could notice but I noticed you said you'd refactor later on, good work!

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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.

  1