Streaming live at 10am (PST)

DIV and Body margins


#1

Hello guys,

I have an issue with

and margins.
System: macOS Sierra (10.12.4), Safari 10.1, Chrome 57
  1. I have big div (hero image) and below two columns with card-style content. My task is to set equal gaps between cards and image. The problem is that I see no gap between hero and columns in designer mode and huge gap in browser. Other gaps (between cards) I made with width and height percents. Here is an image illustrating that:

Public link (WIP)
https://preview.webflow.com/preview/portfolio-test-0109?preview=9875b57e5753ad7881ced991ade0c91f

  1. I set equal body margin (50px), but there is no margin in Safari. Illustration:

Public link (WIP)
https://preview.webflow.com/preview/portfolio-test-0109?preview=9875b57e5753ad7881ced991ade0c91f

Thanks!


#2

Hi @prokhorov,

I really would like to help but my Macbook Pro can't handle your site. I tried to have a look, but after only 60 seconds all my fans start blasting like there is no tomorrow.

Is site performance now issue for you? I even got an Error when trying to surf your site using my mobile device. Also, loading speed is very very slow.

Your site layout is very simple and I would suggest rebuilding it from scratch - with best practices for webdesign in mind.

Sorry that I have nothing else for you, but I wanted to give my 2 cents regardless.

Best,
Karl-Heinrich


#3

Hi @prokhorov,
Here is what I found what is causing the gap between the hero and the cards.

You've set an initial appearance that moves the cards 50px down. While in the designer, initial appearance won't show; it will work in the preview mode or in the published site. I think this displacement of the cards is also causing the issue with the bottom margin in Safari.

As @Karl-Heinrich states, I think your site doesn't follow best layout practices and you should rebuild some parts of it. This videos may help:


I also had the same problem with the performance of your site. My fans start working after opening your preview link. Maybe you are having too many videos playing at the same time. I'm using a Macbook pro.

I hope my answer can give you a little bit of insight on solving your site issues. Let me know if you need any further help.


#4

@Karl-Heinrich thanks for noting about performance. Initially I want to mage video gallery like this: https://framer.com/examples/watch Now I change videos into animated GIFs, but I think it doesn't help, GIFs also have have weight and much worse quality. Have a look:
https://preview.webflow.com/preview/portfolio-test-0110?preview=e4e762c7f4ea056b1ad4ed7a2ed12834


#5

Hi @mrmtta ! Thanks for advice, I delete all interactions, but it doesn't help. Or maybe I just don't find right option. On performance: I really don't understand how to make site with video-cards, like https://framer.com/examples/watch/ Now I change videos to GIFs, but I think it doesn't work. Here is an updated version:
https://preview.webflow.com/preview/portfolio-test-0110?preview=e4e762c7f4ea056b1ad4ed7a2ed12834


#6

You can change the margin-bottom on your "case" div to zero and apply a margin-top of 4%, this way you'll create the gap below the hero while keeping the gap between cards.

Be aware that horizontal margins are relative to the element's width and vertical margins are relative to the element's height. If the element is not a square, horizontal and vertical margins will not be the same. If you want to have the same margins across different elements in your site there are two ways:
_Fixed value, this will keep margins the same size but won't resize depending on the viewport width.
_Margins relative to viewport width: you can use the "vw" unit. This way you can apply a "2vw" to vertical and horizontal margins. This will give your margins a size of 2% of the viewport width. "vw" stands for viewport width.

About the performance, I can see your videos are way too large. They have a resolution of 1080x1080 and are over 2 and 3 MB. You might need to bring these sizes down, maybe a half or third. Videos in Framer are less than 500kb. You want your videos to be that big, no more.


#7

Sorry, I said videos, I see you changed them for animated Gifs. Now the performance has improved, my computer doesn't need the fans anymore to work on your page. Anyway, those GIFs are still too big in terms of loading time, especially when entering your site from a mobile device.

You may use videos as Framer does, but make sure the videos on your site are 500kb or less.


#8

@mrmtta many thanks for advice! VW works, and is solves problem with div margin. According to videos — I optimise file size, now each of them is under 600 Kb, and all videos weights 2 MB. According to slow loading — I use free hosting for videos (and will use fast on site release), so they loads very slow.

Here is public link on this version:
https://preview.webflow.com/preview/portfolio-test-0110-22302f62a0f2f0d6c2c?preview=783ca960ebdab936dbd03113681be4a7

Now I can't solve problem with margin: there is no margin on the bottom of the page (in Safari), but I set it:

And there is second little bug — when I upload videos in to they didn't have equal size with images in other cards. But grid and settings is the safe. Difference is in few pixels, but it brakes the grid:

Thank you very much for help!


#9

Hi @prokhorov. I'm sorry to tell you that your site is not very well built. You are using the box model in a way it is not intended. I strongly recommend you to watch those tutorials shared before and rebuild your site. If you keep doing things with the actual layout it is possible that you will continue running into errors that break your grid. I don't have a clear understanding of what is causing that problem in Safari, but is probably the same thing that is breaking your grid.


#10

@mrmtta Thanks! I will follow your advice.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.