Hi there. I’ve created a site on xway, and all seems well so far. Only problem is I am linking Vimeo video files as Markup Items and they don’t have padding (online my text) so they are clipped on one side when shrunk on a mobile phone.
Here’s an example: shorts
Its got padding on the left hand side on mobile, but not on the right hand side. Any ideas where I’m going wrong? I can’t find the padding option for markup items.
Thanks in advance!
You could add a left and right margin to the div that contains the vimeo video.
You don’t need to use Markup items for videos in Xway. A much easier way to add them is to insert an iframe (select Iframe from the Insert menu, or click on the Iframe tool in the toolbar). To get the iframe to resize with the page, you can follow the instructions for Video aspect ratio in the Iframes chapter of the Xway User Guide:
- Insert the iframe within a div: in Xway, insert an empty container box (which will default to a div) and insert an iframe within this empty box.
- Set the div wrapper to have 56.25% bottom padding.
- Set the width and height of the iframe to be 100%.
- Set the iframe position to be absolute (choose Absolute in the Position popup in the Style section of the Box Inspector).
(This is also what your markup code is doing.)
Then it’s a simple matter to add an outside margin to the div wrapper.
The reason there is some space on the left of the video is because you’ve added 2% left padding to the pagediv (page-wrapper). So another way to get space on the right of the video would be to add 2% right padding to the pagediv.
Wonderful - thanks Jeremy - adding the 2% padding to the pagediv did the trick - thank so much for your help.