Make the timeline change based on the day.

Hi,

Thank you for the inquiry.

If you don’t have a child theme, you can’t follow the first suggestion above. If you prefer the second option, edit the functions.php file and add the code below the line mentioned above. This will enable the debug mode and allow you to extract the builder shortcodes from the shortcodes field.

//set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
    return "debug";
}

Place it below this code around line 46.

if( isset( $avia_config['use_child_theme_functions_only'] ) )
{
	return;
}

After that, edit one of the pages with the timeline element and extract the timeline shortcode from the shortcodes field. The shortcodes field should be located right below the Advanced Layout Builder. You can then copy and paste this shortcode into a Text or Code Block element.

Best regards,
Ismael

Hi,
The default Vertical Alignment Title and Content is baseline, if you would like it centered please adjust this setting.

It looks like there is some left padding on your timeline element, I’m not seeing this on my demo site so perhaps the shortcode you wrapped it with has some styling, please link to your page so we can examine.

Best regards,
Mike

Hi,
To change the font size, please use the element font size options, note that you can also set the size based on the device size by clicking the device icons and setting a size for each one if you wish.

It looks like you have the timeline in a 1/3 column and the next item in a 2/3 column while it has a lot of extra space to the right, perhaps if they were both in 1/2 columns it would give you more room. Then after you change the font sizes it should look better. the only padding and margin is from your site layout, it has a max-width of 1310px at Enfold Theme Options ▸ General Layout ▸ Dimensions ▸ Maximum Container width so you could change that setting or try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.home #av_section_2>.container {
	max-width: 100%;
}

to change the max width for just that one section
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

h2.av-milestone-date {
    vertical-align: middle;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike