[FYI] Different Button text/style when in mobile view

[Wikiwi]

The scripts below will let you have a different button style when a Datapage is opened on a mobile device. Technically you will have 2 different buttons with the same action/use, 1 for the mobile view and 1 for the desktop view.

First, create a header and footer field, disable the HTML editor, and put the following STYLE in the header
 

<style>
input[name="MobileButton"]{ display: none !important; } /*this line will hide the mobile*/ button by default
input[name="searchID"]{ display: none !important;} /* this will hide the actual button that*/ comes with the DataPage.

@media (max-width: 640px) { /*this part will detect the width of the screen*/
    input[name="MobileButton"] { display: block !important;}
    input[name="PCButton"] { display: none !important;}
}

</style>
 

Once that is done, create an HTML BLOCK, disable the HTML editor and paste the following code:
 

<input type="submit" name= "PCButton" class="cbSearchButton" value="THIS IS THE DESKTOP BUTTON">
<input type="submit" name="MobileButton" class="cbSearchButton" value="THIS THE MOBILE BUTTON" >

NOTE: you can also put the above code in the footer. It just depends on the look that you want to achieve. I also changed the value for the 2 button so you can see them change when changing screensize.