Desktop isnt matching Laptop

When i look at a page on the laptop version,

  1. All of the content fits cleanly within the screens width.

a. All of the menu items, including the phone number, fit within the blue bar. You dont have to scroll to see anything.
b. The white container box fits cleanly. There is room on the left and the right for the blue gradient background to encapsulate the container.

On the desktop,

a. a big scroll bar appears, which i need to drag, so i can see the rest of the menu and continue to read the white container.
b. Oddly, the white container box now has more width then the blue gradient background… so even with the scroll bar pulled all the way,
the blue gradient does not ‘encapsulate’ the white box.


2. Besides the content not fitting cleanly, there are also blocks that are out of place on the desktop version.

a. Text blocks not wrapping properly (Because they were broken up for mobile, such as the one above and below
**Desktop: **


Laptop:

b. Positioning of text blocks out of place – for example, on Laptop the block was 30px to the left, now on desktop its 30px to the right
c. Ohter blocks are out of place; such as a text block being 1 px too high or too low, compared to laptop.

→ What do i do to make it all match?

→ Can these two platforms match, or is the scroll bar mandatory on desktop and I just need to just fix the other problems?

-----~ Dogwalkextracom.webflow.io

Thank you :slight_smile:

Elliot

Read-only link: Webflow - dogwalkerextra.com

Hi @Elliot, Can you please update your post with some more info? Things like screenshots and read-only links allow everyone to help you faster.

Hi @Elliot,

Please update your post with:

  • Operating System
  • Browser Name and Version Number

Hi @Elliot, I took a peek at the site, and it looks like there are some overflow issues, where the page is scrolling from left to right, leaving whitespace on the page.

This affects mobile views and can cause the issues you have described. I would first start checking for styles that cause elements that are causing overflow and change the styling for those.

One thing to check, are elements with fixed width pixels, that are extending beyond the body viewport. The Xray mode is good for this

I hope this helps!

Hi Elliot, I looked at your site, and how @cyberdave had described, your problem is that you are using fixed width.

This is the number one mistake that will never allow for smooth responsive design, rather try using %, or in the best cases, Auto. This way your site will flow more smoothly across different browser sizes. :wink:

1 Like

Vlad, do I have to use a fixed %?

I have a width on the items, but i made sure none of them were overflowing.
So is it OK now?

…I understand that the principle you are saying is moving forward its better to use %; i agree…

Dave, do I have to use a fixed %?

I have a width on the items, but i made sure none of them were overflowing.
So is it OK now?

…I understand that the principle you are saying is moving forward its better to use %; i agree…

Hi Elliot,

As others have pointed out the issues your having are due to have fixed widths and heights on all your elements… its a recipe for disaster.

I recommend doing some tutorials on the fundamentals of site structure found here Webflow 101 crash course | Webflow University

Good luck

3 Likes

Thanks friend :slight_smile:

Question though–
I would have to go through every page, every device, and fix every class from Width to %.
Thats a lot of work, which could be avoided given my explanation below.

A lot of the classes on the pages are NOT overflowing, on any devices, and they are set on Width-- not %.
Is it technically OK to keep the classes that are NOT overflowing on any devices…
keep it at Width… not change it to %?

Technically speaking.

I understand the principle is moving forward always use %.

Thank you,
Elliot

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