Question

我正在使用woo canvas主题来开发一个网站。我想为移动响应布局添加自定义css .Canvas是响应式的，但我想添加自定义css来改变字体大小等等。我正在使用以下代码在我的canvas子主题style.css中添加css但是更改没有反映在前端....请帮助

// For mobile devices
 @media only screen and (min-device-width : 320px)  and (max-device-width : 480px){
        /* custom css ----------- */
 }
 and so on for other devices

Answer 1

实际上，WordPress子主题的一个主要好处是它可以覆盖原始的style.css。实际上，child theme中唯一需要的文件是正确编写的style.css。

但有一个问题是，Canvas有时使用get_template_directory_uri()，它返回父主题样式，而不是get_stylesheet_directory_uri()，它返回子主题样式。要使用您的子主题样式，您可以在/includes/theme-actions.php中更改子主题中所需的功能。我必须为layout.css和non-responsive.css执行此操作。

在CSS中使用!important是often a bad idea。

Answer 2

问题可能是您在子style.css中编写的CSS不会覆盖原始的style.css文件（其中已经写入了字体大小）。

如果你在CSS中包含！important，它可能会解决问题，例如更改

 font-size: 14px;

到

 font-size: 14px !important;

！重要否决任何其他指定的样式。这是你必须采用Child Themes AFAIK（使用！important来推翻CSS）的方法，除非你删除了原始的style.css文件（哪种方式违背了儿童主题的目的）。

覆盖canvas woo主题的移动响应css

2 个答案: