How can I reduce the size of the Breadcrumbs Widget

  • Profile Image
    PeterMW
    Asked on March 27, 2019 at 06:44 PM
  • Profile Image
    Mike_G
    Answered on March 27, 2019 at 09:59 PM

    To adjust the height of the Breadcrumbs widget in the form you linked, you may inject the following CSS codes to your form.

    .se-main-progress {

        width: 300px;

        margin: auto !important;

        height: 70px !important;

    }

    The highlighted values of the width and height properties on the codes below can be adjusted to your preference.

    How-to-Inject-Custom-CSS-Codes

    If you have other questions or concerns, please feel free to let us know.

  • Profile Image
    PeterMW
    Answered on March 28, 2019 at 06:46 AM

    Thanks.  However, it's the size of the circles and the font that I want to make smaller, and reduce the thickness of the joining line.


    Image from Gyazo

  • Profile Image
    roneet
    Answered on March 28, 2019 at 08:35 AM

    It seems you have removed the widget from the Form or are you referring to some other Form. Do let us know so that we can take a look at it.

    Thanks.

  • Profile Image
    PeterMW
    Answered on March 28, 2019 at 11:49 AM

    Sorry, here it is . . .

    https://form.jotform.com/90855272248261

  • Profile Image
    roneet
    Answered on March 28, 2019 at 01:06 PM

    I have injected the following CSS in the Form:

    .se-progress-content .se-progress-line {
     height: 5px;
    }
    .se-progress-content .se-badge .se-step {
     width: 45px;
    height: 45px;
    }

    15537927691.PNG

    Hope this helps!

    Thanks.

  • Profile Image
    PeterMW
    Answered on March 28, 2019 at 01:33 PM

    Thanks Roneet,

    I did some further CSS coding to reduce the circle size and the font size.  But now I need to reduce the space between the progress bar and the form. Any ideas?


    Image from Gyazo

  • Profile Image
    roneet
    Answered on March 28, 2019 at 02:18 PM

    You can inject this CSS in the Form Designer of the Form:

    #id_26{

    margin-top: -25px!important;

    }

    Here is a guide to do so:

    How-to-Inject-Custom-CSS-Codes

    Give it a try and let us know how it goes.

    Thanks.