Questions / Feedback on my product landing page project

I have two questions on the product-landing-page assignment. Here is a link to the work I have done so far: https://codepen.io/BetoBob/pen/ExmONgV?editors=1100

  1. My nav menu is navigating a bit past my div sections. So the top part of the section is covered by my navbar each time I navigate to a new section. I feel like this has something to do with the margins of my page, but I cannot figure it out yet.

  2. My google map embed doesn’t work on codepen. I have a feeling that the URL for the iframe src is too long for codepen to handle for some reason. You can see the ending part of the URL printed to the screen, along with the rest of the content of the iframe tag. I’m not sure how to get around this because I cannot shorten the embed URL.

  3. This is kind of a minor thing, but for the menu cards, I would like to keep the item-names / costs at the top while centering the description / images. I’m not sure how to approach that. That’s a minor thing though.

I’m also happy to hear general feedback about the page. Thanks!

Welcome to the forums @rehensle. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Keep all your styling external. Do not use in-line styling.

Research scroll-padding-top

When I plug the URL into a browser window it doesn’t work so it’s not just codepen. I get the following error;
Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter.

1 Like

Can you go into a little more detail on this? Are you referring to horizontal or vertical centering (or maybe both)? Can you point us to one card in particular that needs fixing?

1 Like

Thanks for your response! Actually now that I think about it, I would like the text to remain on top but the images to line up at the bottom. For example, if you look at the bakery items, I would like the Almond cookie and Lemon cookie images to line up with each other on the bottom of the card while the text remains at the top.

I did some more research, and I think it’s a restriction with Google Maps API. I’m guessing Google doesn’t want someone to use the embed feature without paying the API fee. I tried a couple of other businesses copying the iframe embed and get the same error from the links. Interestingly all these embeds work on a local instance of my project though.

To get around the problem on codepen though, it looks like the latitude and longitude coordinates can be plugged in instead: https://codepen.io/sheldonled/pen/MrmWbo

I think the easiest way to do this is to rework your HTML a little and then use flexbox to align them the way you want.

For each menu-item div you’ll want just two children. Wrap all of the content in a div to make the first child and then the image can be the second. Then set the display on the menu-item div to flex and use the various flex properties to get them lined up the way you want. I won’t spoil all the fun by telling you exactly how I did it but refer to CSS-Tricks flexbox guide for all your options.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.