每当我将文字放在图片上并进入移动视图时,都会发生这种情况(请参见下图)。理想情况下,我需要文字和按钮来更改屏幕尺寸? 我曾尝试将其放置在其中

@media only screen and (max-device-width: 480px) {
p {
font-size: 10px;
}
}

这是HTML代码

<div class="col-md-6">
<div class="acc">
<img class="img-responsive img-center" src="img/SECC.png" width="960px">
<div class="overlay">

<p id="SECC">SECC, Glasgow</p>
    <p id="SECCSub1">

    Friday 28 November 2015</p>


    <p id="SECCSub2">Saturday 29 November 2015</p>

    <p id="SECCSub3">Sunday 30 November 2015</p>

    <p id="SECCbutton"><button class="buttontest">BUY TICKETS</button></p>
    </p>
    </div>
    </div>

这是CSS

.acc{
    position: relative;
    display: table;
    height: 300px
}
.overlay {
    display: table-cell;
    vertical-align: middle;
}
    #SECC
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 35pt;
    font-weight: bold;
    left: 30%;
    top: 0%
}


#SECCSub1
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 35%;
    top: 34%;
}
#SECCSub2
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 33%;
    top: 41%;
}
#SECCSub3
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 34%;
    top: 48%;
}
#SECCbutton
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-weight: bold;
    left: 37%;
    top: 65%;
}

我没有销售代表来发布图像,因此这里是其链接http://i.stack.imgur.com/HZCW8.png

===============>>#1 票数:0

您是否尝试过使用

@media only screen and (max-device-width: 480px) {
p {
   font-size: 10px!important;
 }
}

我把它扔进了JS小提琴中, !important是使实时取景反应了。

===============>>#2 票数:0

您的代码没有足够的重要性来读取,因为CSS是使用ID设置的。 请记住,媒体查询不会增加特异性。

您需要使用以下任一font-size: 10px !important;font-size: 10px !important; ,或者更好的是,引用每个ID。

@media (max-width: 480px) {
  p, #SECC, #SECCSub1, #SECCSub2, #SECCSub3, SECCbutton {
    font-size: 10px;
  }
}

如果您选择这种方式,请确保媒体查询位于CSS文档的底部。

  ask by Krysta Roe translate from so

未解决问题?本站智能推荐:

1回复

带有响应文本的响应图像

因此,我想向我的网站添加评论。 我试图在图像上转置文本-这是一种基本的方法。 有没有一种简单的方法可以使用引导程序做到这一点? iv尝试在div上使用背景图片,但是在调整页面大小时,div也是如此-图片变得混乱。 iv尝试了其他几种方式(我在网站上发现了类似的问题),问题在于它们不能与引
1回复

响应文本在图像上居中对齐

我已经为我的博客帖子创建了这种布局,并且每个帖子都会自动发布到那里。 我对自己的设置感到非常满意,但是我一生都无法使文本在图像上(垂直)居中(垂直)。 只是想知道其他人将如何处理这个问题。 我已经完全奠定了HTML和CSS 这里的codepen。 如果您有兴趣调整代码,那么如果您将其
2回复

响应图像和文本并排

我正在尝试制作2列: 第一个是占据页面50%的图像,另一个是占据其余50%页面的文本框。 没有利润。 是否有可能具有这种响应能力? 我正在努力使背景颜色与图像对齐。 .imagebox { width: 50%; float: left; } .textbox { width:
4回复

文本重叠的响应图像边框

我用固定的页眉,页脚和中间部分制作了此页面,在该部分中,大图像始终会根据窗口的大小进行调整。 如果有足够的空间,我将尝试在大图像的右侧显示图像说明,几个按钮和另一个小图像。 如果没有足够的空间,那么我希望这些项目都落在大图像之下。 我可以通过创建一个包含项目的表格并将其放置在代码中的大图像
2回复

同时响应图像和文本

有没有一种方法可以使文本在右侧,同时缩放为左侧的图像。 当我尝试调整浏览器大小时,文本高度超出了范围。 我尝试通过媒体查询来执行此操作,但是它不起作用。 我也不想在元素上使用高度。 这可能吗? 这是jsfiddle:
2回复

响应式图像和文本对齐

我有一个使用三个col-md-4作为类的站点。 这是代码: 当屏幕较小时,它看起来像这样 即使在移动显示器中,如何将其放置在单行中?
3回复

图像上方的响应文本块

我想在根据此过时的教程设置并根据上一个问题进行了修改的图像上放置一个响应文本块。 不幸的是,似乎有一些错误。 用于在换行符的任一侧创建填充的span.spacer看起来比文本块的其余部分高,并且我还认为这导致文本无法正确向左对齐。 可以在这里查看开发页面。 您可以在第一行文本的末尾看
1回复

固定响应图像在响应标题中文本旁边的位置

这样做的想法是使响应头包含文本和图像元素,它们位于固定的背景图像上。 我尝试使用引导程序列来执行此操作,该列可在桌面上工作以我想要的方式显示出来。 但是,在较小的设备上,引导媒体查询会按照预期的方式执行操作,并将各列拆分为显示在彼此下方。 我对此没有主意。 我知道我需要以某种方式修复图像
4回复

如何使图像和文本在背景上彼此相邻响应?

我是Bootstrap的新手,已经使用了一周左右。 我目前正在为给女友的圣诞节礼物工作,我真的很困。 我想在背景上放置图片和短文本(彼此相邻)。 图像看起来非常像这样: 在此处输入图像描述它完全位于左侧,并且她旁边有文字。 (在图像和文本之间以及文本和文本的右端之间还有一些地方。图片
1回复

如何在图像上创建响应式文本?

我真的不确定如何以任何其他方式提出这个问题,但我正在尝试在图像上加载文本 - 这本身似乎是一个棘手的任务,但我已经开始使用本教程了。 遗憾的是,该教程稍微过时了,我无法找到一种方法来动态更改移动设备的字体大小和跨度大小,并仍然将文本保持在图像顶部的正确位置。 调整窗口大小时,文本和框不会