用于调整CSS类填充的jQuery代码

Question

在我的网页Lemendu上，我设置了两个CSS类"redback“和"greenback"，分别对应于我的顶部菜单部分”ESPA-OL“和”FRAN side“，将它们放在右手边。但是我有一个关于media-queries的问题:在宽度为767px的情况下，两个CSS类与屏幕不匹配。我想让它们与我顶部菜单的其他CSS类垂直对齐(也就是说没有任何填充或边距)。我不能在media-queries文件的每个屏幕大小中直接更改我的CSS类，因为这样，它将与767px以下的屏幕不匹配。

我发现唯一的解决方案是直接调整我的jQuery文件中的两个CSS类，告诉他我不需要任何填充。(除非有人有任何CSS解决方案)。但我完全了解jQuery代码。

下面是我的两个CSS类：

.redback {font-size:15px; color:#1b1c1e; padding:0px 10px 0px 120px; font-weight:400; width: 50px; position: relative; }
.greenback {font-size:15px; color:#1b1c1e; padding:0px 20px 0px 10px; font-weight:400; width: 50px; }

下面是我的jQuery代码：

jQuery(document).ready(function(){


    jQuery('#nav-button').click(function() {
            jQuery('#options li').toggle();
    });

    if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();
    });
    }

    jQuery(window).resize(function() {
  if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();

    jQuery(window).resize(function() {
  if ( jQuery(window).width() > 767) {
            jQuery('#options li').show();
            jQuery('#options li a').click(function() {
            jQuery('#options li').show();
    });
    }
    });

}); 

我提前感谢你的建议，任何帮助都是感激的。

Answer 1

在您的css媒体查询中：

media="all“@media only screen和(max-width: 767px) .redback和.greenback您需要移除将文本推到一边的填充。你所需要的就是每种颜色的样式。