Media Query

  • Resolved ThemeAWESOME

    (@tsquez)


    6 years, 9 months ago

    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. ??

    Thread Starter ThemeAWESOME

    (@tsquez)

    Hi there,

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Media Query’ is closed to new replies.