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.
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.
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?
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
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.
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 %.
