был бы очень признателен, если бы вы помогли мне с этой проблемой. Два столбца карты показывают один под другим в диапазоне от 860 до 1200 пикселей, а ползунок показывает их слева. Ниже 860 пикселей и выше 1100 пикселей это показывает их нормальное состояние. Это страница - http://motopara.com/SandBox/menu-test.php Я приложил картинки для лучшего понимания.
Как это должно обычно показываться - img
Вот как это выглядит на экранах между 860 и 1200px - img
Я также поставил код основного файла; / * product-skewed-bar begin * / - это css для карточек продукта, вы также можете просмотреть код фрагмента и изменить размер браузера, чтобы увидеть проблему.
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Evo Aviation | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
<style>
/* ROW-2-COL*/
.column {
padding: 10px;
}
/* Clear floats after the columns */
.row-2-col:after {
content: "";
display: table;
clear: both;
}
/* CARD BEGIN */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: auto;
text-align: center;
font-family: arial;
}
.card p {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 5px;
margin-left: 10px;
text-align: left;
padding-top: 6px;
@font-face {
font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf');
}
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin-top: 0px;
margin-bottom: 10px;
}
/* product-skewed-bar begin*/
.center {
text-align: right;
margin-top: 0px;
margin-right: 0px;
}
div.skewed-heading-content {
-ms-transform: skew(20deg);
-webkit-transform: skew(20deg);
transform: skew(20deg);
position: relative;
right: -7px;
background-color: red;
padding: 5px 30px;
font-family: "Arial Black", Gadget, sans-serif;
font-weight: bold;
}
div.skewed-heading-bg {
color: #FFF;
background-color: red;
display: inline-block;
padding: 0;
margin-right: 7px;
-ms-transform: skew(-20deg, 0);
-webkit-transform: skew(-20deg, 0);
transform: skew(-20deg, 0);
}
hr.center {
display: block;
height: 1px;
border: 0;
border-top: 1px solid red !important;
padding: 0;
margin-top: 0px;
margin-bottom: 10px;
padding-bottom: 10px;
}
/* product-skewed-bar end*/
@media all and (min-width: 860px) {
.column {
float: right;
width: 44%;
padding: 33px;
}
</style>
</head>
<body>
<div class="page-container">
<div class="">
<div class="column">
<!-- CARD BEGIN-->
<div class="card">
<p>REBEL 2 RS</p>
<hr/>
<img src="/img/Rebel2_SS_Logo.jpg" alt="R2RS" style="width:100%">
<hr/>
<div class="center">
<div class="skewed-heading-bg">
<div class="skewed-heading-content"> <a href="rebel.php" style="color:#FFFFFF;"><span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i></a> </div>
</div>
</div>
<hr class="center"/>
</div>
</div>
<!-- CARD END-->
</div>
<div class="column">
<!-- CARD BEGIN-->
<div class="card">
<p>ALPHA</p>
<hr/>
<img src="/img/sim_n_rob.jpg" alt="RS2" style="width:95%">
<hr/>
<div class="center">
<div class="skewed-heading-bg">
<div class="skewed-heading-content"><a href="alpha.php" style="color:#FFFFFF;"> <span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i> </a></div>
</div>
</div>
<hr class="center"/>
</div>
</div>
</div></div>
<!-- CARD END-->
<!-- Partner Crousel -->
<div class="logo-slider">
<?php include 'client-logo-slider.html';?>
</div>
<!-- Partner Crousel -->
<!-- CONTENT END -->
<!-- PAGE CONTAINER END -->
</body>
</html>