Responsive field code

module.php

//field

'horizontal_line_width' => array(
                'label'             => esc_html__('Horizontal Line Width', 'diti-divi-timeline'),
                'type'              => 'range',
                'option_category'   => 'layout',
                'description'       => esc_html__('Here you can set a width for the Horizontal Line.', 'diti-divi-timeline'),
                'toggle_slug'       => 'main_settings',
                'mobile_options'    => true,
                'responsive'        => true,
                'default'           => '3px',
                'default_unit'      => 'px',
                'allow_empty'       => true,
                'range_settings'    => array(
                    'min'   => '1',
                    'max'   => '20',
                    'step'  => '1',
                ),
                
//render
 $horizontal_line_width = $this->props['horizontal_line_width'];
        $horizontal_line_width_tablet = $this->props['horizontal_line_width_tablet'];
        $horizontal_line_width_phone = $this->props['horizontal_line_width_phone'];
        $horizontal_line_width_last_edited = $this->props['horizontal_line_width_last_edited'];

        if ( '' !== $horizontal_line_width || '' !== $horizontal_line_width_tablet || '' !== $horizontal_line_width_phone ) {
			$line_width_responsive_active = et_pb_get_responsive_status( $horizontal_line_width_last_edited );

			$line_width_values = array(
				'desktop' => $horizontal_line_width,
				'tablet'  => $line_width_responsive_active ? $horizontal_line_width_tablet : '',
				'phone'   => $line_width_responsive_active ? $horizontal_line_width_phone : '',
			);

			et_pb_generate_responsive_css( $line_width_values, '%%order_class%% .timeline::before', 'width', $render_slug );
        }