Streaming live at 10am (PST)

Desktop vs Laptop Messes with Layout

Hi Webflowers,

My design looks as intended on laptops, tablets, and mobile. However, when I use a desktop computer (even on the small browser sizes) the horizontal lines on my “Recent Projects / Featured Work” page bleed into the left and right margins. This also occurs on the Projects pages, News, and About pages, but not the Home page…

The middle section is 86vw and each side section is 7vw. Added together that should be 100vw.

Has anyone had any similar issue that they could point me in the right direction with this?

Kind regards,

Zach


Here is my site Read-Only:

Link to the staged site with the line overlap

Screenshot of desktop

Screenshot of laptop

This also occurs on the Projects pages, News, and About pages, but not the Home page

The first thing I noticed is that the “Recent Projects / Featured Work” page is build differently than the homepage, most notably on the left side border element—where the former is using a 1px wide div in a fixed position 7vw from the edge, while the latter is using a 7vw wide div in a fixed position against the edge. That makes me think there are a bunch of other differences that can attribute to the over-extended horizontal lines, but ultimately I am curious why you ended up building the layout this way instead using the “blocks” down the center to define the borders?

Typically the more complex you make your layouts the more opportunities there are for issues to come up—especially across different browsers. This layout is actually very simple when you break it down, and can be recreated with center-aligned containers with a left, right, and bottom border (shown in the gif below with different colors):

With this structure, your center containers don’t need to rely on the left and right containers to line up—instead creating the vertical borders with their own edges.

If you have the time, I’d suggest making some changes to mimic what I’ve suggested above (at the very least, on a test page) and see if it doesn’t help solve your issue. If you prefer to stick with the structure you’ve already created, I’d make sure you copy the layout and element styles from the homepage as it seems like it’s working as expected across all the breakpoints.

Feel free to reach out if you run into any issues or have questions :metal:

@mikeyevin that mostly works… ! :sweat_smile: Thank you.

The one piece that doesn’t align still is the menu icon on tablet and below breakpoints. The hamburger is centered inside a 14vw wide div block.

Desktop computer monitor:
Screen Shot 2020-10-22 at 12.37.52 PM

General screen monitor:
Screen Shot 2020-10-22 at 12.41.01 PM

I tried a version where I made that menu div block absolute position top right, rather than as a static div inside the “right side of featured work” fixed div, but it’s still having this align issue… any thoughts on why that might be happening / how to solve that?

read only link for the test page: https://preview.webflow.com/preview/silent-house?utm_medium=preview_link&utm_source=designer&utm_content=silent-house&preview=7052c8539c92e6f96467360b10b27414&pageId=5f91d91216d4c9f1bef54d86&mode=preview

or live here: https://silent-house.webflow.io/featured-work-test

Much appreciated, :pray:

Z

I recorded a quick video covering what I would change to hopefully get this working a bit more consistently, so hopefully this solves the problem you’re noticing:

Feel free to reach out if you have any issues :+1:

Thanks for the video @mikeyevin. I was able to follow along, however I am realizing now why I switched to the other method. When I load the page on my desktop or laptop browser, the header does not align with the projects section even though they are the same width and both centered on the page, see screenshot attached.

Screen Shot 2020-10-22 at 4.19.53 PM

If I adjust the browser size it corrects itself, but upon that initial load things look off… any guesses as to why that might be happening? Ways to correct it?

Read only: https://preview.webflow.com/preview/silent-house?utm_medium=preview_link&utm_source=designer&utm_content=silent-house&preview=7052c8539c92e6f96467360b10b27414&pageId=5f8e30ae3794f75b5b5d6f62&mode=preview

Sincerely,

Zach

I’m not seeing the issue on my end, what browser/OS are you noticing it on?

In terms of fixing the issue, I’d make sure each of your “containers” are using the same class and only changing the child elements within them.

Hmm odd. I’m seeing the issue on both Google Chrome and Firefox, and on both desktop and laptop. No issues on Safari. Also no issues in Google Chrome’s “Inspect” Device Simulators.

My desktop is macOS High Sierra 10.13.6
Laptop is macOS Catalina 10.15.7

I’ll have a look at the parent and child class elements. Thank you @mikeyevin

For anyone else who is reading this, that final issue was resolved by setting all parent elements to the desired width, and their children elements’ widths to 100%.

I had set one of the children elements to the desired width and the parent to auto, which caused the parents’ border to go beyond the others. I probably messed this up during the initial building of the template. Thanks for the help @mikeyevin!

Cheers

1 Like