Product Landing Page issue

Product Landing Page issue
0.0 0

#1

Here is a link to my Product Landing page. It took me quite a while to complete it. It still has one issue I can not resolve: the header overlaps the form flexbox when the screen narrows for a little bit. I set all margins and paddings of corresponding flex boxes to 0px but still can not solve this issue. Any feedback and suggestions would be much appreciated. Thank you!

Version of the same page with background colors (it might be easier to understand the layout this way)


#2

by header and form I think you were referring to the top header (where your title is) and the email form, but I cannot see any overlap no matter how narrow I make the viewport. If that wasn’t what you meant, let me know and I’ll take another look. My product landing page is driving me nuts too…


#3

@hbar1st, there is a tiny overlap when the viewport passes the 6. 5 inches threshold (I have a media query for max-width=6.5 inches). Thank you for having a look at my code


#4

What was the reason to choose inches for some of css measurement units and for others px, ems, etc?


#5

The only thing I noticed is the text “handcrafted, homemade…” disappears when I reduce to about ipad width (when everything is starting to be vertically aligned). Not sure if you meant that to happen…
I took a screen shot:


#6

@hbar1st, yes, that’s exactly what I mean. I added a link to the same project but with background colors. It might probably be easier to understand it this way


#7

@sorinr, I think I used inches and em only. The reason for using inches was for the logo image to appear of the same size on higher resolution screens. And I used em because I wanted the page to be more responsiveon d But I am not sure if I used it right, I can’t say I understand the logic behind it


#8

ok here you go. I had to change a couple of lines and add a new media selector that uses pixels.

I came up with the specific px width by trial and error. Hopefully it works for you.

(you can compare the css file to yours using any text comparison tool)


#9

@hbar1st, Thank you so much! Yes, it really solves the problem. I will proceed with the next project. Probably I will understand why those containers had different widths someday :slight_smile:


#10

Well I would say try not to use inches unless you really know the exact size of everything you are using on the page. Pixels are the most granular but least flexible but from what I can see online, they are the ones used exclusively for media selection.


#11

Fyi, i will delete the forked pen … let me know soon if you have not copied it yet.


#12

Thank you, I have copied the pen already. Will look a bit closer at measurement units and their usage