Good day! I finished the Landing Page project. I would be glad to receive any feedback.

[futurenear]

Landing page FCC
Greetings to all forum participants. I don’t speak English, so I use a translator. (Google If you don’t quite understand me, then don’t hit me with sticks.

1. I would like to know your opinion about my work.
2. Help me understand how to solve the problems that I have not succumbed to:

• the elements of the nav-bar react to an increase in one of the blocks (How to get rid of this twitching? If you still write where it is explained why this is happening, or write yourself. You will make my day better :))
• I still don’t understand why the <video> tag refuses to work for me. I put my version in the comments (<! - ->)

[bbsmooth]

Two issues to get you started:

1. There is a horizontal scroll bar appearing at all times. You’ll want to get rid of that completely.

2. The three boxes at the bottom need to shift at narrower view ports into a single column.

[futurenear]

1. already corrected.
2. i.e. to make a column through “media”?

[bbsmooth]

@futurenear

• already corrected.

Yes, there is no more horizontal scroll bar, but now as I narrow the browser window the nav links at the top right start to disappear.

@futurenear

• i.e. to make a column through “media”?

Yes, this is normally done via CSS media queries.

[futurenear]

Yes, there is no more horizontal scroll bar, but now as I narrow the browser window the nav links at the top right start to disappear.

I just started saving changes for “media” already. And I decided to set a minimum width. (so that the head does not hurt as much as possible)

Am I wrong the minimum width is 380px?

[bbsmooth]

@futurenear

I just started saving changes for “media” already. And I decided to set a minimum width.

Am I wrong the minimum width is 380px?

Minimum width for what? If you are asking about the view port width, I would not worry about a minumum width for that. If you use media queries correctly to make your page responsive to changes in the view port width then you really don’t need to concern yourself with a minimum width.

[futurenear]

I’m making the minimum width now, just to quickly understand what size the blocks / indents should be. As a result, when I shrink the site in windowed mode, the window does not allow shrinking less than a certain size.
i.e. I want to experiment now and use this project as a hint on what size the blocks / indents should be, so that next time I don’t waste a lot of time on their selection. So that when I started to do the last task, I just put blocks of the required size, and already from them I assembled the site.

Am I correct in my reasoning?

[bbsmooth]

@futurenear

As a result, when I shrink the site in windowed mode, the window does not allow shrinking less than a certain size.

In some respect you are violating the principles of responsive design doing this. Now, if your minimum width is so small that no one will ever reach it then it doesn’t matter. But if this is the case then why even have a minimum width? By adding a minimum width you are basically imposing a restriction on your viewers that probably doesn’t need to be there in the first place.

Here is how I would do responsive design. Narrow your browser as skinny as it will go and style your page to look nice in that narrow view port. Use this as your base styling. There is no need to set minimum widths here. If the device the user is viewing your page with is too narrow then their browser will supply a horizontal scroll bar if needed.

After you have the skinny styling in place then gradually widen your browser and once you think you have enough horizontal room to rearrange elements on your page then set your first break point there and style the changes under that break point. Use min-width and em units for the break point (that way it will take into account not only changes in view port width but also changes in text size). To get the approximate em units just divide the px width by 16. Continue widening and adding break points as needed.

Now while I don’t recommend you set a min-width on your page I do recommend you set a max-width, and use em units for that as well. There is no one rule here but a lot of people start finding content hard to read if it extends beyond the high 40’s em.

[futurenear]

@bbsmooth

In some respect you are violating the principles of responsive design doing this. Now, if your minimum width is so small that no one will ever reach it then it doesn’t matter. But if this is the case then why even have a minimum width? By adding a minimum width you are basically imposing a restriction on your viewers that probably doesn’t need to be there in the first place.

Indeed you are right! When I checked the site on my phone it didn’t look good.

@bbsmooth

Here is how I would do responsive design. Narrow your browser as skinny as it will go and style your page to look nice in that narrow view port. Use this as your base styling. There is no need to set minimum widths here. If the device the user is viewing your page with is too narrow then their browser will supply a horizontal scroll bar if needed.

After you have the skinny styling in place then gradually widen your browser and once you think you have enough horizontal room to rearrange elements on your page then set your first break point there and style the changes under that break point. Use min-width and em units for the break point (that way it will take into account not only changes in view port width but also changes in text size). To get the approximate em units just divide the px width by 16. Continue widening and adding break points as needed.

Thank you for paying attention to this aspect. But you need to double-check the fonts on different devices, otherwise it’s difficult for me to find the right solution.

@bbsmooth

Now while I don’t recommend you set a min-width on your page I do recommend you set a max-width, and use em units for that as well. There is no one rule here but a lot of people start finding content hard to read if it extends beyond the high 40’s em .

For a long time I could not understand what you mean. Because I use an old laptop with a screen resolution of 1350x750. But I additionally looked for information, and found it very useful for myself. Thank you again for such a detailed answer!