[英]flaticon icons work when hosted locally but not working when online
[英]CSS media query looks good locally but not when hosted online
本地我的banner-home2.png
看起来像我需要它。
但是,上传时它的大小会变大。 (我在heroku上托管这个,但是css文件在亚马逊上)。
我可以看到,在这些Codepen中 ,它看起来也是错误的(比它应该更大):
在线版本:
本地版本(正确尺寸):
Codepen: https ://codepen.io/anon/pen/EzOONJ
这些是我在亚马逊上的媒体查询:
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
home.css
(媒体查询):
.my_header_bg_color {
/*background-color: #4FB99F;*/
/*background-color: #00ADB5;*/
/*background-color: #6BB983;*/
background-color: #00AD80;
}
/* standard media queries breakpoints */
@media (min-width: 320px) and (max-width: 480px) {
/* smartphones, iPhone, portrait 480x320 phones */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.productos_finales_home img {
padding-bottom: 15px;
}
.my_home_banner_image {
bottom: 0;
top: 0;
position: relative;
z-index: 0;
width: 60%;
display: block;
margin-right: auto;
margin-left: 165px;
}
/*.my_home_banner_image {*/
/*display: none;*/
/*}*/
.my_home_banner_title {
color: white;
font-size: 36px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
text-decoration: none;
background-color: #969696;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
-o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border: none;
}
.my_home_banner_left {
margin-left: 10px;
z-index: 100;
}
.stickers_referenciales {
margin-bottom: 5px;
}
}
@media (min-width: 481px) {
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 40%;
display: block;
margin-right: auto;
margin-left: 185px;
}
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
margin-bottom: 100px;
}
.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}
}
@media (min-width: 641px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 70%;
}
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
margin-bottom: 100px;
}
.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}
.my_home_banner_lef_text {
margin-left: 10px;
z-index: 100;
}
}
@media (min-width: 961px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 60%;
}
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
margin-bottom: 100px;
}
.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}
}
@media (min-width: 1025px) {
/* big landscape tablets, laptops, and desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 55%;
}
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
margin-bottom: 100px;
}
.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}
.subscribe_field {
width: 350px;
}
}
@media (min-width: 1281px) {
/* hi-res laptops and desktops */
.my_home_banner {
bottom: 0;
margin-right: 8%;
z-index: -600;
}
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 70%;
}
/*.my_home_banner_image_left {*/
/*display: none;*/
/*}*/
.my_home_banner_title {
color: white;
font-size: 50px;
font-weight: bold;
}
.my_home_banner_subtitle {
margin-top: 0%;
padding-top: 0%;
}
.btn, h2, p {
margin-bottom: 10px;
}
.btn-comentario {
margin-bottom: 100px;
}
.my_home_banner_left {
margin-left: 20px;
z-index: 100;
}
.subscribe_field {
width: 350px;
}
}
.center-video {
margin: 0 auto;
width: 400px;
}
在home.css内线296
@media (min-width: 1281px)
.my_home_banner_image {
bottom: 0;
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: 40%;
}
也许是因为服务器端的HTML,CSS或任何其他语言版本与我们拥有的localhost不同。 但你可以按照我上面给出的超过1281屏幕尺寸设置那个东西。
只需修改此.my_home_banner_image
类添加top
并减小网站的width
@media (min-width: 1281px)
.my_home_banner_image {
bottom: 0;
position: absolute;
right: -0px;
bottom: 0;
z-index: 0;
width: 55%;
top: 25px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.