1. 首页
  2. 问答
  3. 降低标题的高度

降低标题的高度

2016-03-09 179 views
0

我使用名为'Artisteer'的软件创建了一个响应式网站。我创建了一个长度稍长的标题，其中有一个实际上是“文本”的标志。它在桌面浏览器中非常完美，但在移动浏览器中，标题感觉更长。我试图通过在响应代码中改变头部的高度来缩短它的工作时间。但徽标（实际上是文本）仍然处于原始位置。我想减少标题顶部和徽标之间的距离。我试着改变.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; 
    }

来源

2016-03-09 Akshay

+0

您是否曾尝试在标题栏断点处为同一断点处的徽标位置添加响应标记？ 请记住，更改父级的布局并不总是会影响孩子的布局。这取决于您在父母和子女身上使用的定位属性。如果不针对每个断点中完全相同的节点，则尤其如此。 – Korgrue

+0

标题的文本正在被那个带有一个'art-header-widget'类的图标压下。我会将它隐藏在一个小设备上，但是你也可以设计它的样式，以免在小设备上占用太多空间。 –

+0

'！important' * hisssssssss *。我强烈建议您尝试进入devtools，并检查您的规则是否仍然适用，如果您删除'！important'注释。如果他们这样做，就把它留下。未来的CSS开发将成为人们在第一轮带来原子弹时的重要争夺战。 – Katana314

回答

0

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

它将把这个酒吧“外”的文件删除您看到的保证金。

如果向下滚动，“固定”位置将在同一位置显示此栏。

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

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

来源

2016-03-09 18:12:25

+0

Thanx。我通过添加了'.responsive.responsive-tablet .social { display：none; } .responsive.responsive-phone .social { display：none; }' – Akshay

+0

不客气。所以它解决了？ –

+0

如果对你有好处，请将此主题标记为已解决:) –

0

我由于我不知道你添加到实际的头文件中的哪些类，所以不能帮上太多的忙。我查看了页眉的网页检查器，看起来你的头部高度设置为100％，我不确定，因为我现在知道完整的CSS。

试试这个在您的标题：

max-height: 100%; 
display: table

如果你这样做，那么头仅会扩展到屏幕尺寸的100％，如果有许多因素，但因为它显示表，那么div就会崩溃到足够大以适应它内部的元素，而不会变大。这对于响应式设计非常有用，因为div根据屏幕尺寸缩小和拉伸。

来源

2016-03-09 18:08:48

0

替换这个CSS和会解决问题。

.social { 
    height: 220px; 
    margin-top: 220px; 
    perspective: 1000px; 
    position: fixed !important; 
    width: 200px; 
}

来源

2016-03-09 18:22:49

相关问题

 相关问题