I’m trying to make sure my sections max out at 1440px on huge displays, with content staying within 1200px.
I believe I fixed it all, except for the last section which is split (Contact & Info). Somehow I can’t get it to stay centered when stretching the window to simulate a large display - it keeps shifting to the left as shown on the screengrab below.
Do you guys know what I am doing wrong by any chance?
Thanks - the image is fine actually - that the section below that’s causing
me trouble. The split between white and blue halves should be centered but
it shifts to the left. Thanks!
Thanks but isn’t the max width precisely what I am trying to achieve? I
basically want the blue (and white but since the body is white it won’t
matter) to line up perfectly with the rest of the content vertically when
the window is stretched. Does that makes sense? Thank you!
Sorry I thought it went through. Here is a download link and a screengrab. I basically need the spilt (Contact / Info) to be in the center. I can’t make it happen somehow. Thank you! Ed
In desktop view, it’s pixel perfect, dead center.
In _tablet view, it is off center by one pixel.
I did my own screen cap in preview mode in Webflow then ported them both to PS, dropped in guides and found the natural split… I don’t think people will notice. IMHO.
Spec:
Google Chrome Browser Version 54.0.2840.71 m
Screen Res: 1360 x 768
Monitor: 32" Samsung LCD in 720 HDMI
Thank you so much! I started from scratch again and somehow it worked. I must have missed something the first time around. However, I just tested on iPhone 6 & 7 and somehow I get some issues (unexplained white space on the right of some of the pictures and columns - now as shown below. I don’t see the same thing in the webflow tablet / mobile views.
I don’t have the phones, just the mobile emulator in Chrome… if the phones show it, then there may be an issue. Can’t really help you on that one Ed. Sorry.
Yeah, I did the same in Chrome under the Dev Tools emulator and Mobile Browser Emulator and didn’t find any issue as well, just like Nelson didn’t. But if the phone is showing an issue and it breaks the engagement of the site, then it’s worth addressing.
Thank you guys. I tested again at the AT&T store, and the issue happens on both iPhone 7 & 7 plus in safari. I tried on a galaxy S7 edge android in chrome and the site looked fine there. Could this be a platform bug? Here are some shots:
Thank you Dave - I followed your instructions with the picture and it seems to have solved that specific issue. I didn’t set it to cover though, as I am setting my images as HiDPI and can’t seem to have both.
I still see the issue with the split section underneath though, where the blue background doesn’t cover the whole width on iPhone 7 plus only (was also happening on iPhone 7 yesterday but not anymore after I fixed the picture above it as you instructed).
I am actually able to reproduce this by shrinking my browser window as shown here - it’s showing the white strip on the right side, right past the breakpoint. Can’t find a fix yet though. Thanks for your help. Ed
So I am pretty sure this max width (which I need on desktop for everything to stay centered and within 1440px) is the culprit. However I can’t seem to be able to get rid of it for mobile only. Each time I try and come back to it after I preview, it goes back to 720. Do you guys know how I can achieve this? Thank you, Ed PS: pls see SG below.
Try setting the background image size to cover:
