整合Joomla后移动网站不同! CMS

时间:2014-07-20 13:31:25

标签: php css joomla media-queries joomla3.0

我目前正在创建一个网站。我制作了第一个初始原型静态但只集成了Joomla! cms进去吧。 (已删除链接)

最初设备宽度(在我的nexus 5上的纵向)出现在360,但随着集成的cms,设备宽度出现在980 - 所以css媒体查询不正确

有没有Joomla!插入的脚本可能会影响这个或者它可能是php在不同时间提取文件的方式吗?

这是css:

@media (max-width: 991px) {
  .topnavitem:hover,
  .subnav_item:hover {
    background-color: inherit;
  }
  .long {
    box-shadow: black 0px 4px 10px -2px;
  }
  .footer {
    box-shadow: black 0px -1px 3px 0px, white 0px 0px 6px 0px;
  }
  .sliderimage.teamphotosliderimage {
    margin-top: 0px;
  }
  .sliderimage.varistyimg {
    margin-top: -24px;
  }
  .topnavitem {
    position: static;
    max-width: 100%;
    margin-left: 0px;
    padding-left: 40px;
    float: none;
  }
  .topnavitem.w--current {
    max-width: 100%;
    padding-right: 0px;
    float: none;
  }
  .topnavitem.nodropdown {
    position: relative;
    max-width: 100%;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 40px;
    float: none;
  }
  .navmenu {
    position: absolute;
    background-color: #4d1c1c;
  }
  .menubutton.w--open {
    background-color: #4d1c1c;
  }
  .navblock {
    display: block;
    margin-left: 0px;
    padding-left: 0px;
    float: none;
  }
  .subnavsection {
    position: static;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .long {
    box-shadow: black 0px 4px 10px -2px;
  }
  .sliderimage.varistyimg {
    margin-top: 0px;
  }
  .slider {
    height: 250px;
  }
  .sidelinksimage {
    width: 120px;
    height: 120px;
    margin-right: 5px;
    margin-left: 5px;
  }
}
@media (max-width: 479px) {
  .long {
    box-shadow: black 0px 4px 10px -2px;
  }
  .sliderimage.teamphotosliderimage {
    margin-top: 0px;
  }
  .sliderimage.varistyimg {
    margin-top: -16px;
  }
  .slider {
    height: 120px;
  }
  .sidelinksimage {
    width: 65px;
    height: 65px;
    margin-right: 5px;
    margin-left: 5px;
  }
  .menubutton.w--open {
    background-color: #4d1c1c;
  }
  .gallery_image {
    width: 21%;
  }
}

1 个答案:

答案 0 :(得分:0)

有趣的是,此设置修复了它:

<meta name="viewport" content="width=device-width, initial-scale=1.0">