Issues with font-size

[mcostales84]

Hi, I’m creating a global block and all the fonts looks exactly how I want them, but on the front page, where I’m adding the global block, all the fonts looks super tiny, and I have the size set to 18 max and 14 min, stepper.

What am I missing?
this is the page https://lab.colonialvanlines.com the global block is the app section

[friech]

Hi Manny,

Thank you for writing in, the Stepped ROOT FONT SIZE that you set on Theme Options > Typography is getting overwritten by a bootstrap CSS. Please adjust the bootstrap CSS accordingly.

Cheers!

[mcostales84]

But where is that bootstrap CSS?

[friech]

Hi There,

If you have not integrated that manually, then it could be one of your plugins is doing that, please do a plugin conflict test. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes,
Cheers!

[mcostales84]

Thanks @friech, I know what plugin is causing that, it’s a custom plugin that the previous developer did, and it’s only importing the bootstrap 3.3.7

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

I know you have no obligation to help me with this, but, can you at least help me figure it out how can I override the bootstrap typography setting?

[Alaa]

Hi Manny,

I believe adding this CSS snippet into (X > Theme Options > CSS) should fix this issue:

@media (min-width: 1200px){
	html {
	    font-size: 16px!important;
	}
}
@media (min-width: 979px){
	html {
	    font-size: 16px!important;
	}
}
@media (min-width: 767px){
	html {
	    font-size: 16px!important;
	}
}
@media (min-width: 480px){
	html {
	    font-size: 16px!important;
	}
}
html {
    font-size: 16px!important;
}

Thanks.

[mcostales84]

Hi @Alaa, thanks, that can make the trick, but then I will have the same issue, I can have a headline with another size because here I’m setting the size as !important, that why I asked for a way to override the setting from bootstrap without having a new global setting.

[ruenel]

Hello There,

The bootstrap styling will always override all other settings especially if this stylesheet is loaded last in the page. It would be good if you can disable or remove this styling instead. Did you added Bootstrap on purpose?

Kindly let us know.

[mcostales84]

It was added on purpose, the previous developer create a plugin that we really need to use.

[mldarshana]

Hi There,

We cannot provide support for 3rd party customizations as it would be outside the scope of the support. The best way is to contact your developer for a workaround. Basically your plugin’s custom CSS should be loaded before the child theme’s style.css file.

Thanks for understanding.

[mcostales84]

I know @mldarshana.
I found this code in another site and I think if we can adjust it to X/Pro, will do the trick, can you help me?

add_action( 'wp_enqueue_scripts', 'generate_remove_scripts' );
function generate_remove_scripts() 
{
    wp_dequeue_style( 'generate-child' );
}

add_action( 'wp_enqueue_scripts', 'generate_move_scripts', 999 );
function generate_move_scripts() 
{
    if ( is_child_theme() ) :
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    endif;
}

[mcostales84]

Nevermind, I did it!!!

I had this line of code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

I commented it and add this function to the plugin itself:

function my_plugin_unique_style() { $base = get_stylesheet_directory_uri(); wp_enqueue_style( 'style-my-plugin-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); } add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 100 );

Thanks anyway for your help!

[mcostales84]

Also, this link can be helpful

https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402

[nabeel]

Glad you’ve sorted it out and thank you for sharing the solution with us.

Cheers!