降低标题

时间：2016-03-09 17:55:07

标签： html css

我使用名为“Artisteer＆＃39;”的软件创建了一个自适应网站。我创建了一个标题，它的高度略长，并且有一个标志，实际上是文字＆＃39; 。它在桌面浏览器中运行良好，但在移动浏览器中，标题感觉更长。我试图通过在响应代码中更改标题的高度来缩短它，它工作。但徽标（实际上是文本）仍处于原始位置。我想减少标题顶部和徽标之间的距离。我尝试更改.art-headline和.art-slogan中的值，但它似乎没有用。

以下是我更改标题高度时的屏幕截图 enter image description here

以下是实际的响应式视图 http://www.responsinator.com/?url=www.secondgf.com%2F

以下是响应式编码 

/* Created by Artisteer v4.3.0.60745 */
  .responsive body
  {
    min-width: 240px;
  }
  .responsive img 
  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }  
  .responsive .art-content-layout img,
  .responsive .art-content-layout video
  {
    max-width: 100%;
    height: auto !important;
  }
  .responsive.responsive-phone .art-content-layout img 
  {
    margin: 1%;
  }
  .responsive.responsive-phone .art-collage,
  .responsive.responsive-tablet .art-collage {
    margin: 0 !important;
  }
  .responsive .art-content-layout .art-sidebar0, 
  .responsive .art-content-layout .art-sidebar1, 
  .responsive .art-content-layout .art-sidebar2 
  {
    width: auto !important;
  }
  .responsive .art-content-layout, 
  .responsive .art-content-layout-row, 
  .responsive .art-layout-cell 
  {
    display: block;
  }
  .responsive .art-content-layout, 
  .responsive .art-content-layout-row
  {
    padding: 0;
  }
  .responsive .image-caption-wrapper 
  {
    width: auto;
  }
  .responsive.responsive-tablet .art-vmenublock,
  .responsive.responsive-tablet .art-block
  {
    margin-left: 1%;
    margin-right: 1%;
    width: 48%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .responsive .art-responsive-embed 
  {
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 */
    position: relative;
  }
  .responsive .art-responsive-embed iframe,
  .responsive .art-responsive-embed object,
  .responsive .art-responsive-embed embed
  {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .responsive .art-header 
  {
    width: auto !important;
    max-width: none !important;
    min-height: 100px !important;
    min-width: 0 !important;
    margin-top: 2%;
    text-align: center;
  }
  .default-responsive .art-header 
  {
    height: auto;
  }
  .default-responsive .art-header *
  {
    position: relative;
    text-align: center;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }
  .default-responsive .art-header .art-headline, 
  .default-responsive .art-header .art-slogan 
  {
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    margin: 2% !important;
    text-align: center !important;
  }
  .default-responsive .art-header .art-headline a, 
  .default-responsive .art-header .art-slogan 
  {
    white-space: normal !important;
  }
  .default-responsive .art-header .art-logo
  {
    display: inline-block;
    margin: auto !important;
    left: auto;
    top: auto !important;
    width: auto;
    height: auto;
  }
  .responsive .art-header .art-slidenavigator 
  {
    position: absolute;
  }
  .default-responsive .art-header .art-positioncontrol 
  {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 2% auto !important;
    width: auto !important;
    height: auto !important;
  }
  .responsive .art-header #art-flash-area
  {
    display: none;
  }
  /* Search and other elements in header element directly */
  .default-responsive .art-header>.art-textblock
  {
    position: relative !important;
    display: block !important;
    margin: 1% auto !important;
    width: 75% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
  .default-responsive .art-header .art-textblock 
  {
    position: relative !important;
    display: block !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    width: auto;
    background-image: none;
  }
  /* '.art-header *' used noram align, but for '.art-textblock *' we must force align because of preview */
  .responsive .art-header .art-textblock *
  {
    text-align: center !important;
  }
  .default-responsive .art-header .art-shapes > .art-textblock,
  .default-responsive .art-header .art-slide-item > .art-textblock
  {
    display: none !important;
  }
  .default-responsive .art-header .art-shapes > .art-textblock *
  {
    text-align: center !important;
    width: auto !important;
    height: auto !important;
    display: block;
  }
  .default-responsive .art-header .art-slider .art-textblock *
  {
    text-align: center !important;
    width: auto !important;
    height: auto !important;
    display: block;
  }
  /* For icons like facebook, rss, etc. */
  .responsive .art-header>.art-textblock>div 
  {
    width: 100%;
  }
  .responsive .art-sheet
  {
    width: auto !important;
    min-width: 240px !important;
    max-width: none !important;
    margin-right: 1% !important;
    margin-left: 1% !important;
    margin-top: 1% !important;
  }
  #art-resp {
    display: none;
  }
  @media all and (max-width: 1009px)
    {
    #art-resp, #art-resp-t { display: block; }
    #art-resp-m { display: none; }
  }
  @media all and (max-width: 480px)
    {
    #art-resp, #art-resp-m { display: block; }
    #art-resp-t { display: none; }
  }
  #art-resp-desktop {
    display: none;
  }
  #art-resp-tablet-landscape {
    display: none;
  }
  #art-resp-tablet-portrait {
    display: none;
  }
  #art-resp-phone-landscape {
    display: none;
  }
  #art-resp-phone-portrait {
    display: none;
  }
  @media (min-width: 1200px)
    {
    #art-resp-desktop { display: block; }
  }
  @media (min-width: 980px) and (max-width: 1199px)
    {
    #art-resp-tablet-landscape { display: block; }
  }
  @media (min-width: 768px) and (max-width: 979px)
    {
    #art-resp-tablet-portrait { display: block; }
  }
  @media (min-width: 480px) and (max-width: 767px)
    {
    #art-resp-phone-landscape { display: block; }
  }
  @media (max-width: 479px)
    {
    #art-resp-phone-portrait { display: block; }
  }
  .responsive .art-content-layout, 
  .responsive .art-content-layout-row, 
  .responsive .art-layout-cell 
  {
    display: block;
  }
  .responsive .art-layout-cell 
  {
    width: auto !important;
    height: auto !important;
  }
  .responsive .art-content-layout:after, 
  .responsive .art-content-layout-row:after, 
  .responsive .art-layout-cell:after 
  {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .responsive .responsive-tablet-layout-cell,
  .responsive.responsive-tablet .art-footer .art-content-layout .art-layout-cell 
  {
    margin: 1%;
    width: 98% !important;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .responsive .responsive-layout-row-2 .responsive-tablet-layout-cell,
  .responsive.responsive-tablet .art-footer .art-content-layout .responsive-layout-row-2 .art-layout-cell
  {
    width: 48% !important;
  }
  .responsive .responsive-layout-row-3 .responsive-tablet-layout-cell,
  .responsive.responsive-tablet .art-footer .art-content-layout .responsive-layout-row-3 .art-layout-cell
  {
    width: 31% !important;
  }
  .responsive .art-post
  {
    border-radius: 0;
  }
  .responsive .art-footer-inner
  {
    min-width: 0;
  }

3 个答案:

答案 0 :(得分：0)

我对此无能为力，因为我不知道你在实际的标题中添加了哪些类。我在你的标题中查看了Web检查器，看起来你将标题的高度设置为100％，我不确定，因为我现在知道完整的CSS。

在标题中尝试此操作：

max-height: 100%;
display: table

如果你这样做，那么如果有那么多元素，那么标题只会扩展到屏幕大小的100％，但由于它是显示表格，所以div会折叠到足够大以适应里面的元素它并没有更大。这对于响应式设计很有用，因为div会根据屏幕尺寸缩小和拉伸。

答案 1 :(得分：0)

添加此CSS行：     .social { position : absolute; }或.social { position : fixed; }

它会把这个酒吧放在外面＆＃34;删除您看到的保证金的文件。

＆＃34;固定＆＃34;如果向下滚动，位置将在同一位置显示此栏。

正如你所说，要在手机和平​​板电脑中禁用它，你可以这样做：

.responsive.responsive-tablet .social { display: none; } .responsive.responsive-phone .social { display: none; }

答案 2 :(得分：0)

替换此css并解决问题。

.social {
    height: 220px;
    margin-top: 220px;
    perspective: 1000px;
    position: fixed !important;
    width: 200px;
}
相关问题
最新问题