Streaming live at 10am (PST)

Flex box max width & centering on large display


#1

Hi guys,

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?

Thank you!!

Ed

Read-only link:
https://preview.webflow.com/preview/simplified-for-men?preview=fff0bcb479a881a3d881bc0becb7cec3


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Ed_Delage :slight_smile: Try setting the background image size to cover:

hope this helps :slight_smile:


#3

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!


#4

you can also remove the max-wdth of your footer:


#5

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!


#6

This will help you picture what I'm saying. Thank you.


#7

Were you able to open the video? I keep looking but can't find the issue...


#8

@Ed_Delage,

What video? I don't even see a link to a video. :confused:

~B.


#9

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


#10

@Ed_Delage,

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


#11

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.


#12

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.

Take care,
~B.


#13

just tested on browserstack using iPhone 6S Safari and i'm not seeing any horizontal scrolling issues.


#14

@Ed_Delage,

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.

Good luck!
~B.


#15

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:


#16

Hi @Ed_Delage, could you try updating the background image styles, I made a quick video:

Let me know after styling is done and I am happy to take another look.


#17

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).

Here are 2 images:

Thank you...


#18

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


#19

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.


#20

try setting that to 100% on that breakpoint