Jump to content

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

Recommended Posts

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

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;}


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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...