I am working on an ebook and the video is (at least I think) is out of date. I am trying to correctly edit the two mobile phone versions. I am following the video tutorial and there seems to be some steps I’m missing or left out.
This is what the video shows when I’m (48:05) trying to adjust the width of the leftSide.
So I go here and insert this and I’m not sure this is correct. Confused by this.
And don’t get me started on the right side not working. That’s an entire new post. I’m a visual learner and have to know why and how things change, not just click here and go on. In a perfect world, I would see the entire Style, Settings, and Navigation bars expanded to know why and how things happen. Any help on this? Better instructional video? Step by step pdf? Anything will be of assistance.
Thanks.
There’s a left and right side to the ebook.
‘pageWrapper’ is the parent div block.
‘leftSide’ and ‘rightSide’ are the children.
Flex is applied to ‘pageWrapper’ (Display Settings)
This allows the children’s width to be set 2 ways.
Use the Layout/Width setting (see your first image).
Use Layout/Flex Child Settings/Sizing (see your third image).
The second option overrides the first. So if you set the width in the ‘Advanced Sizing’ window your ‘Width’ window will grey out.
Here’s the problem with the video.
At 8:40 he adds 45% to the ‘leftSide’ using the ‘Sizing’ setting and at 45:46 he uses the ‘Width’ setting to adjust the mobile version of the ebook. Because he used the ‘Sizing’ first it will grey out your ‘Width’ setting.
Remove the style(s) from the Sizing setting (for mobile) and follow the tutorial using the Width settings.
That makes a lot of sense and it helped in taking care of the width issue. I appreciate the help. I am still learning things about Webflow so I don’t fully understand those details just yet, but I’m getting there.
