html - 如何使用响应式属性对版权栏进行样式化

Question

我想要一个版权栏，左边有一个短语，右边有另一个短语。但是，当我尝试最小化寡妇大小时，事情开始出错。当我缩小窗口时，我曾尝试将文本居中，这样当它们彼此重叠时，它看起来更赏心悦目，但现在我的底部 div 与顶部 div 重叠。这是我希望版权栏的样子:

https://amazingwebsites.co/

这是 JSFiddle:

http://jsfiddle.net/7hjngcLd/

我主要是对正确的部分有问题。这是那个的 CSS:

#copyright-right {
float : right;
font-size : 1.5em;
color : #222222;
padding-top : 8px;
padding-left : 20%;
font-family : 'Roboto condensed';
font-weight : 300;
letter-spacing : 0;
padding-right : 20%;
background-color : #B5B7B9;
}

感谢您提供的任何帮助。

Answer 1

与您的媒体查询有关:

@media (max-width: 1400px)
  #copyright-right {
      top: -8px;
  }

确保该属性未设置为适当的视口(viewport)宽度，这样您就不会出现重叠。现在，您可以将它应用于宽度不超过 1400 像素的任何视口(viewport)。