Why some places(not all as you can see), when I change the scale, space between text and images is changing and make it looks not so good and not the same proportions? Should it be, when you scale, dependant on your screen and be same proportions on every different pc? But why I do not have this? And for the mobile phone version it seems ok, looks the same when you build it.
I can’t really help, as the flashing images in your video make me feel too ill to look at the page in detail, but I suggest you start by validating the HTML and CSS and correcting errors.
I had a look at your videos (which… I must say, are not entirely helpful from a diagnosis perspective. Why did I need the music playing?).
Most things you show in that video behaves as I would expect, except for two things:
1: The paragraph ending “Thanks for passing by…” (I suspect you’ve got a fixed-height DIV wrapped around this paragraph, which is why it’s not shrinking when you expand the window.)
2: The spacing between the text and first picture-framed picture in the other video. That one my brain can’t immediately come up with an answer for, and I’d have to see your code.
@media screen and (max-width:767px) {
.et_pb_row_8.et_pb_row{
margin-top:38px!important;
}
}
You also fiddle with the padding and have different amounts of margins and padding on the other buttons. Indeed you are adding bottom padding to make space and then in the same rule use a negative margin to counteract some of the space you just added! This is nonsense and a maintenance nightmare.
All those similar elements should have consistent styles applied controlled by a single class. Instead you have multiple rules with different margin and padding values and then change them all ad-hoc in your media queries. You are also using !important everywhere which makes it all that much harder. !important should be used sparingly and is seldom needed if specificity has been calculated properly.