Streaming live at 10am (PST)

Alignment problems

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?

To be specific, It looks like the text in your slides wraps when it’s too wide for the viewport, but mine doesn’t.

OT, are you into music?

I’ve tried setting each of the elements to 100% width and 100vw, but no luck.

Honestly, I’m pretty close to giving up on building this with Webflow. :frowning:
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.

Hi @daxliniere,

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’ll provide an update as soon as possible.

Thanks again.

1 Like

Hey Micah, We got some problems, my man. The fixed background is no longer fixed. There’s a bug thread here: Fixed position background image scrolls (video included)

On a mobile device, the hamburger menu is not visible and the width is wrong, even though it looks perfect on the Designer.

This site needed to be up and running 2 days ago. I’m really stressed out about missing my deadline.

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.

Hi @daxliniere,

I noticed that there were a few updates that I completed in my version that you can also complete in yours in order to keep the layout as expected.

You will find that I placed Div Block 2 in it’s own section:

This will allow the layout to retain on mobile:

Feel free to mimic the changes that I completed, and don’t hesitate to reach out if you have any questions.

Read-only link: https://preview.webflow.com/preview/mixdirection-text-slider?preview=b6679de46fdbd32f24d22af7664438f1

Hi Micah,
Happy Easter if that’s your thing. :slight_smile:

Unfortunately the mobile layout is still majorly broken, despite being shown mostly correctly in the Designer.

  1. The hamburger menu does not exist on mobile, yet it’s fine in the Designer.

  2. The site renders much wider than the screen width

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

  4. The ‘logo bar’ isn’t at the bottom of the first page (first 100vh)

  5. The logos in the logo bar aren’t scaling down to fit on screen and maintain positions.

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

I just looked back at my post 6 days ago and the same 5 bullet points I raised are still there.

What is going on with the Designer, man? Can I get this support request escalated? I feel like your devs should know about these deficiencies.

Cheers,
Dax.

Hi @daxliniere, thanks for getting back in touch. Can you please re-share the read-only link to your site? https://university.webflow.com/article/how-do-i-share-my-sites-read-only-link

There was a link in the other post you mentioned, but it does not appear to be valid anymore.

I am happy to take a look.

Hi Dave,
Thanks for your time!

https://preview.webflow.com/preview/mixdirection?preview=0b8cbc5be0b1498eddaf69c11fbff121

Hi, ok, there are multiple things here, so here is item #1 about the menu icon not showing on mobile:

Remove the negative top margin on the nav link menu class.

I am checking on items 2-6

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

<style>
.ticker-text {
word-break:break-word;
}
</style>

I am continuing to help check on items 3-6.

Dude! What a rockstar! :slight_smile:

I’ll check this tonight

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?

Regarding point #2 - your video doesn’t play unfortunately. I have added the code you mentioned to the site header, but it doesn’t fix the text wrapping problem or word-break.

The reason for you can’t make the image bigger is because it’s inside a row. The columns inside that row is set be equal width. You play with the width of each column in the rows settings. Hope it helps!

Edit: this is easy to test on your site. Move the img outside the row, remove the 500px max limit and you can make it as big as you want.

Hi @jorn, thanks very much for your reply. If I remove the 500px maximum, the logo gets smaller…?

OKAY, now we’re getting somewhere.
I set table to 3|6|3 in grid options; logo got bigger. Then I set logo to 80% max width.
Looks like some issues are solved.

Remaining problems:

It seems like Webflow can’t handle the logo bar at the bottom of the first page. Seems to mess everything up. With the logo bar, the page is rendered wider than viewport. Creates several problems.

Desktop:
-The elements on the first page aren’t scaled except when the width is very small.
-The layout does not maintain equal vertical spacing as width decreases. (try resizing your browser width)

Mobile:
-The 4 elements on the first page aren’t scaled or positioned correctly.
-(see above) Logo bar is not at the bottom of the first view (within 100vh)
-Hamburger menu is too far down on the nav bar.