function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Justin PorterJustin Porter 

Flow text box css

I have a flow imbedded in a VF page via apex:interview. I've been able to customize most of it but I can't seem to make the text fields, drop downs etc larger. End goal is to make it iPad compatible. Does anyone have any insight? I've tried many different css lines and none have worked.

Thank you, in advanced!
Best Answer chosen by Justin Porter
ShailendraTiwariShailendraTiwari
c.Hi
If you use bootstrap then you can solve your problem. Bootstrap use every device compatible like ipad , mac ,mobile and other browser compatiable.
1. you include bootstrap file like- 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

then define a media type of ipad and wirte css in related screen on device.

A.  /* Small devices (tablets, 768px and up)   if you use css in media type then solve Your problem*/
@media (min-width: @screen-sm-min) { ... }
B.  /* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
C.  /*Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

please help this then mark It.

Regard 
Shailendra Tiwari
 

All Answers

ShailendraTiwariShailendraTiwari
c.Hi
If you use bootstrap then you can solve your problem. Bootstrap use every device compatible like ipad , mac ,mobile and other browser compatiable.
1. you include bootstrap file like- 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

then define a media type of ipad and wirte css in related screen on device.

A.  /* Small devices (tablets, 768px and up)   if you use css in media type then solve Your problem*/
@media (min-width: @screen-sm-min) { ... }
B.  /* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
C.  /*Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

please help this then mark It.

Regard 
Shailendra Tiwari
 
This was selected as the best answer
Justin PorterJustin Porter
Thank you!! This was a great starting point for my project, I really appreciate it!