Hi Micah,
I looked on my phone (Huawei P10, Chrome) and it looks nothing like in the Designer. For one, the hamburger menu is clearly shown in mobile preview in Designer, but doesn’t exist on mobile device.
The page is wider than the screen, but the bottom bar (dark semi-transparent ‘logo section’) clearly stops where the edge of the page should stop.
The layout of the first section flexbox aren’t correct at all. There are 4 parts (logo, text slider, “Hosted at…” and logos), but they are not equally spaced across the screen height. The logo and text slider are colliding.
The ‘bottom logo bar’ isn’t at the bottom of the first page.
There’s a huge gap above the logo in the first section.
The logos in the bottom logo bar don’t scale and hence are cutoff.
Why doesn’t the published site look like the Designer?
Hi Micah,
Unfortunately, no, the slider doesn’t work. I struggled for MANY HOURS with the slider, watching and re-watching the tutorial videos. As another user on the forum pointed out, the video only shows a single slide and breaks as soon as you use Flexbox.
In the end I gave up and used the animation. Incidentally, the alignment problem was even worse using the slider. First of all, the text was the same size (it didn’t scale) and worse still, every single frame had different alignment. This can’t be corrected with margin offsets.
Have you got another solution, please?
(Side rant: Why is item placement so haphazard in HTML? Why doesn’t it behave like an image editor eg Photoshop?)
Great question, and great point! You are correct: we would be unable to use flexbox directly on the slider mask or the slide for this situation.
In regards to the text alignment: each text would be placed at the top of the slider, and the slider height would be determined by the largest slide (currently, unable to dynamically size the slider natively)
Hey Micah!
Thanks so much for the rebuild, it looks good on desktop and mobile now.
(It’s a shame that we still can’t copy/paste between sites yet.)
I have recreated the slider, setting-by-setting, and found a small bug:
For the Heading element “text-slide”, even though the Text Align setting inherited the value of ‘Center’ from ‘Section’ and ‘Main’, the text inside was left aligned. I had to re-click the already-selected ‘Center’ setting.
After recreating the slider you made, it seems to display wrong on mobile for some reason. Did you have to customise the smaller viewports? I thought Flexbox should do that automagically, right?
Honestly, I’m pretty close to giving up on building this with Webflow.
On mobile, the 4 blocks at the top are completely messed up. Nothing scales automatically and positions aren’t respected. It’s a jumble mess and I don’t think it’s possible to make a new website for my main business using WF. Which is a shame, since you guys are all so nice & helpful.
Thank you so much for reaching out about the issue you are having with implementing the slider. I imagine that is not what you were expecting, but I’m happy to help!
I will definitely look at your updated layout to provide an additional solution. Though I’m an employee at Webflow - your success is important to me because I geek out when I get to help people reach their goals.
I to am having slider problems but was able to resize if you want to see. My problem is over laying elements being effected by the slider animation. It blurs out the text below my slider each time it moves slides.
Unfortunately the mobile layout is still majorly broken, despite being shown mostly correctly in the Designer.
The hamburger menu does not exist on mobile, yet it’s fine in the Designer.
The site renders much wider than the screen width
The 4 elements (large MixDirection logo, text slider, “Hosted at…” text and logo bar) aren’t scaled and evenly spaced on the page. (Not obeying flexbox settings?)
The ‘logo bar’ isn’t at the bottom of the first page (first 100vh)
The logos in the logo bar aren’t scaling down to fit on screen and maintain positions.
How do you make the text in the slider wrap lines when it’s too wide for the viewport?
Could it be that the page is rendering on mobile much larger than the actual screen size? Either way, this is killing me. I’m missing out on valuable promotion time as I can’t push this site out into the real world looking like this. It would go against everything I do (I care about quality).
Hi @daxliniere, here is a video on issue #2, where the site is rendering wider on mobile than in the designer due to fact that the whitespace created by overflow on the body is rendered as additional whitespace on mobile, making the page wider, and the content appears “squished”.
Hi Dave,
Regarding point #1 - I’ve removed the -44px adjustment, but now it sits too low in the nav bar. It should be vertically centered in the bar. how can that be corrected?
Regarding point #5 - I half worked it out. I have set the minimum height & width to 10px and this, for some reason, stops it from being shrunk at all. Webflow is definitely not obeying the minimum limit of 10 pixels (it’s more like 90px minimum).
The reason I have set a minimum is because I was trying to overcome this problem of not being able to increase image size (even though it’s SVG):
#7 - Another new problem, without changing anything, the site is now slightly wider than the viewport on desktop browser. I restored multiple site versions from 1 to 3 days ago and the problem exists in all of them. It makes me wonder WTF is going on. How can Webflow be so unstable with its layout?
