Support » Plugin: Kirki » Media Query

  • Resolved Thomas

    (@tsquez)



    Hi there,

    I can’t seem to wrap my head around adding media queries and i was wondering if you could possibly give an example.

    Let’s say I have an H1 tag with the font-size of 45px, but on mobile screens and tablets I want it to be 22px.

    The media queries I have are as follows:

    @media screen and (max-width:39.9375em) as well as
    @media screen and (min-width:40em) and (max-width:63.9375em).

    How would I add them to the following:

    XXXXXX_Kirki::add_field('xxxx_customizer', array(
    	'type'        => 'dimension',
    	'settings'    => 'xxxx_header_tag',
    	'label'       => __('Headin Font Size','xxxxxx'),
    	'section'     => 'xxx_my_header_tag_section',
    	'default'     => '45px',
    	'priority'    => 1,
    	'transport'   => 'auto',
    	'output' => array(
    		array(
    			'element'  => 'h1',
    			'function' => 'css',
    			'property' => 'font-size',
    		),
    	),
    ));

    Or do I have to create a new control?

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Something like this should work:

    
    XXXXXX_Kirki::add_field('xxxx_customizer', array(
    	'type'        => 'dimension',
    	'settings'    => 'xxxx_header_tag',
    	'label'       => __('Headin Font Size','xxxxxx'),
    	'section'     => 'xxx_my_header_tag_section',
    	'default'     => '45px',
    	'priority'    => 1,
    	'transport'   => 'auto',
    	'output' => array(
    		array(
    			'element'  => 'h1',
    			'function' => 'css',
    			'property' => 'font-size',
    		),
    		array(
    			'element'       => 'h1',
    			'function'      => 'css',
    			'property'      => 'font-size',
    			'media_query'   => '@media screen and (max-width:39.9375em)',
    			'value_pattern' => 'calc($ / 2)',
    		),
    		array(
    			'element'       => 'h1',
    			'function'      => 'css',
    			'property'      => 'font-size',
    			'media_query'   => '@media screen and (min-width:40em) and (max-width:63.9375em)',
    			'value_pattern' => 'calc($ / 1.5)',
    		),
    	),
    ));
    

    You can adjust the media_query and value_pattern args to your liking, the above is just an example. 🙂

    Hi there,

    Sorry for the late reply. Thank you very much, it’s greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.