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
Product landing page: https://codepen.io/Belle2/full/KJrQWz
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
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
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.
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
but like I said that is just an opinion
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!