Adding swipe events and editing properties in mobile footer

[Matthew Gardner]

How do I add a swipe event to the entire screen? Basically on any swipe left or right I want the screen to change.

Also, how do I center/make buttons in the footer bar fill the page or scale?

[Maryna Brodina]

Select the mobilescreen, go to Events tab, select Swipe event and Navigate to Page Action

Try this CSS:

html body .ui-footer div[class*="_wrapper"] .ui-btn {
display: block;
}

html .ui-mobile-viewport .ui-footer div[class="mobilebutton"][class="_wrapper"] {
float: none;
}

[Matthew Gardner]

Thanks for the reply!

The CSS made the buttons fill the footer but vertically stacked them. I just want the horizontally spaced well and not all mashed in the bottom left.

[Maryna Brodina]

Hello! Please try to put buttons inside the Grid component

[Matthew Gardner]

Great! Now how would I go about dynamically resizing those so the middle of my three buttons is centered and they're all the same size? Could you give me example CSS?

Thanks!

[Maryna Brodina]

Hello! Please try another way. Remove Grid and previous CSS. Put for example three buttons in footer and create the next Custom CSS

html body .ui-footer div[class*="_wrapper"] .ui-btn {
display: block;
}

html .ui-mobile-viewport .ui-footer div[class="mobilebutton"][class="_wrapper"] {
float: left;
width: 33.33%;
}