投资组合按响应CSS如果它不在style.css?

时间:2012-10-20 03:15:54

标签: wordpress responsive-design

我正在使用Wordress中的Portfolio-Press主题。我添加了一个980像素宽的文件作为徽标给我一个横幅"看。它是一个风化的木板外观。为了处理这个文件左边和右边的边缘,这个边缘最终是白色的,我把一个风化的木板文件放在" branding" div,位于" logo" div,并给它一个repeat-x,这样无论屏幕设置的大小如何,它都会填充空白。工作正常,除非浏览器的大小低于750px。有一个@media css调用激活,使背景向下移动约100 px并拧紧菜单栏。你认为这很容易找到和纠正,但我是个假人。我已经搜索过这个css调用,无法在真正的css文件中找到它。它必须由脚本或其他东西生成。

问题是,在没有重写javascript或写这个css的任何内容的情况下,我能做些什么吗?并且,如果它的javascript必须被重写,那它到底是什么?

您可以在

查看该网站

www.bufalobobschalupas.com

如果在打开开发人员工具的情况下运行它,很容易看到css发生变化,并选择" branding" div,在#34;包装内"格。

2 个答案:

答案 0 :(得分:0)

很难给出一个行号,因为css已经缩小了,但这是你的罪魁祸首;

@media screen and (max-width: 750px) {
   #branding {
     width: 46%
     height: auto;
   }
}

删除width和height属性,看起来很好。

您可能希望以该屏幕尺寸添加媒体查询,从而删除.col-width

中的填充
.col-width {
   padding: 0;
 }

编辑:意识到我只有一半回答了你的问题。有问题的css文件是;

http://chalupaholics.com/wp-content/w3tc/min/3b548d20.31cc2f.css

我不知道这是如何生成的,但我想通过一个插件将css编译成单个文件以减少页面请求并缩小它。我是这么说的,因为即使在元数据之前,css和JS的顺序也会异常高。使用Grep或Windows上的Astrogrep搜索您的安装,以便在插件执行此操作之前查找此CSS的来源并在其中进行修改。

答案 1 :(得分:0)

在尝试了解如何在Portfolio视图中正确添加边框到缩略图时,我发现这篇文章描述了我需要更新的css元素:

http://wordpress.org/support/topic/theme-portfolio-press-cant-remove-the-grey-border-on-the-thumbnails

  

“在你的CSS文件中,找到:#content img,img.thumbnail和remove   border:1px solid #DDD;“

然后我在header.php中覆盖我需要的样式,直接在结束< / head> 标记。这有点像黑客,但我喜欢它比在长CSS文件末尾编辑更好。我认为这保证了我的CSS指令将是最后加载的,我将始终在文件顶部看到我的小修改。

不确定这是否有帮助,但我花了一些时间去寻找要编辑的CSS。我认为这可能是分享这个发现以及我如何使用它的好地方。