[Resolved] How to edit mobile css in child theme

[Kenny]

Hi Tom,

We are using Generatepress with the child theme Freelancer for our website.
From Freelancer, we’ve created a child theme to further enhance the website to our standards.

We’re running to some problem in our responsive website, like the scale of the header image, we want it to be smaller on tablets.

Our question simply is, how can we implement the mobile.css file into our child theme, which is called Freelancer-Child. We found the original mobile.css in Generatepress/css/mobile.css, but of course when we edit this file and your theme is being updated, all our changes are gone.

Can you help us out?
Thanks!

Regards,

Kenny

[Tom]

Hi Kenny,

You can use our CSS plugin: https://generatepress.com/knowledgebase/adding-css/

Then just wrap your CSS in a media query for mobile:

@media (max-width: 768px) {
    /* Mobile CSS in here */
}

[Kenny]

Hi Tom,

Great plugin, but it didn’t work for me tho.
I’m always editing with a text editor which is hooked to my ftp server, so i can instantly – and easily – edit CSS / PHP files.

Is there any way to integrate the mobile css in my child theme?

Thanks.

Kenny

[Tom]

Since you’re using a child theme hosting on WordPress.org that received updates, not really.

Your other alternative is to create a plugin which adds a stylesheet to the theme.

So your plugin file would have this:

add_action( 'wp_enqueue_scripts', 'yourplugin_scripts', 50 );
function yourplugin_scripts() {

	wp_enqueue_style( 'my-style', plugin_dir_url( __FILE__ ) . 'style.css' );

}

Which assumes you have a style.css file in the same directory as the plugin file.

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[Kenny]

Great thanks for your support 🙂

[Tom]

No problem. Glad I could help 🙂

[Author]

Posts