I would appreciate a feedback

Making this responsive on a small screen was a lot of work. Thanks to a fellow camper that helped. I hope it’s worth it, i am proud of myself regardless :slightly_smiling_face:

Product landing page: https://codepen.io/Belle2/full/KJrQWz

The background of the upper-left logo doesn’t blend well, being white whereas the background of the whole page is off-white. You should also probably shrink the logo a little bit (maybe by 25%), since it’s making the top navbar pretty large.

The “About Us” link doesn’t go anywhere. Also, the yellow drop-shadow on the text in the vertical menu makes it look kind of blurry. You should avoid or minimize drop shadows on small screens.

I don’t see any big issues though, and the responsiveness is good all the way to my browser’s minimum width. It’s also making me kinda hungry :slight_smile:

I noticed the difference in the background too. Tried to change the logo’s background, but nothing happened. I guess that’s because it’s the original background color that came with the picture.

It does link somewhere, i must have tampered with something. I’ll check it out. I’ll minimize the shadow as well.

Thank you! Lots of work went into it. Lool @ making you hungry. Feel free to feed on the pictures.

I appreciate the feedback. Gracia!

I made those changes, and i must say, the page looks much better. You can check it out.

I really like it. You did a great job.

Thank you. :slightly_smiling_face:

I tried to use the video wrapper code that you used. It doesn’t work with my fixed nav-bar, and the bottom margin becomes very large. And when I keep height set to zero my video disappears. I copied every thing exactly. I’m not sure why it’s not working, so I have a very small video …

Did you have a problem with when it’s the very next item after the header, or did you always have it down lower in the layout?

Can you send the link of your work/project? Let’s see if i can help.

Sorry, O haven’t been on for a while and started researching a grid issue. I’ll have to come but to this later.

Hi there,
My comments regard stylistic choices so take them with a grain of salt…
I think you could benefit from a collapsible navigation for mobile. this post covers that

Personally the scale efect on hover seems a tad too much, maybe dial it down to 1.15 and speed the transition to 500ms
the last set of images is unbalanced


you could assing the one on the right to the right edge of the grid, or you could use the transform translateX to shift both towards the right and have them centered. you can do that with grid!

but like I said that is just an opinion

Almost%20there

Hi,
I decided to tweak the page a bit, so added the effect yesterday. I noticed the irregularities too, was going to fix it when i have the time, or just take it out entirely. Thanks for the suggestions, i’ll work on it.

Oh okay. I see the link below.

Hi Helen,

I may have fixed the video issue. I worked with your code, and adjusted what needed to be adjusted to give the desired result.

.videoWrapper { 
  /*I gave the wrapper a fixed height of 450px, and margin bottom to separate the video from the text below it */
  height: 450px;
  margin-bottom: 40px;
 }

.center{
  /*This is making the video look tacky and giving it a big, black top border. You can edit the heading separately.
 
  text-align: center;
  color: green;
  background-color: black;*/
  
  /*i reduced the width of the container to 70% and changed the margin to 0 auto, to center the video*/
  width: 70%;
  margin: 0 auto;
  padding-top: 120px;
  font-size: 1.3rem;
  padding-right: 0px;
  /*height: 20%;*/
}

/*I noticed a space at the top of the nav-bar so i added this body selector to get rid of it*/
body {
  margin: 0;
  padding: 0;
}

You can use media query to adjust the size/width of the video for different screens. Oh! remove the video width and height from the markup.

Cheers!