Mid-progress Product Landing Page feedback

In the spirit of trying to get better at facing criticism and conquering the fear of people seeing my work in the incomplete stages, I would like to go ahead and ask for feedback. There’s so much that I still need to do: some styling, some responsiveness issues, all media queries…

The one thing I’d for sure like to ask for help with is how to make my large image change when a thumbnail is clicked. I’ve had trouble finding that information because I don’t know what to google. And I don’t know a thing about JavaScript right now, but I borrowed a piece of someone else’s code that I found. My next step, as far as I know, is to make the thumbnails clickable.

Another thing is that one of my thumbnails is rotated and I don’t know why. I tried rotating it in CSS, which worked, but it also made that image act as if it were on a different layer, so that when I scrolled, it didn’t disappear behind the header, if that makes sense. Now I’ve tried uploading a version of the image that’s rotated in the opposite direction to see if I could trick it into loading upright, but it still shows up positioned just like before! Any insight about that would be greatly appreciated.

Thanks!!

1 Like

I would start studying Javascript to achieve changing pictures. Especially a jquery library might come in handy in this case. For CSS, you could put three images in the container and make your container as big as each image. Set overflow to hidden and translate them when a thumbnail is clikced. I would look at image sliders for ideas.

If you are talking about your middle thumbnail image being rotated. It’s because it’s original photo was rotated meaning you probably shot a horizontal photo of your picture.

One tip,
Your header takes too much space. Consider reducing its height.

1 Like

The header is way too massive to be following the html. Maybe just the black part, but its 40% with the image.

I’ve thought about this a lot today, and I think I’m going to drop the multiple image idea for this project. I’m eager to learn it, but after seeing that jquery is like 300hrs away, I am going to accept that it’s a little advanced for where I am currently so I can move forward with the lessons! I wanted to thank you for acknowledging/trying to help with this problem in 2 different posts.

I’ve forked my pen so I can attempt a major overhaul of that header. I’ve been super unhappy with it.

Thanks again!

I agree, it’s too big and I’m not thrilled with the way it looks. I’m working on some changes. Thanks for the feedback!

I would suggest just using the black part and using that image as a banner somewhere down in the page. here is a example from my product landing page