-1
На рабочем столе сайт выглядит хорошо, но когда я пытаюсь уменьшить экран до небольших разрешений, элемент смешивает один с другим и выглядит очень плохо. Например:Ответственность не работает, когда я использую Bootstrap
- изображение повторяется и не steched, как я бы ожидать
- Текста находится на Контантый possition. Я хотел бы, чтобы все изменилось в соответствии с размером изображения.
- Баттоны и их шрифты должны быть меньше при уменьшении размера экрана.
Он должен выглядеть следующим образом: screen shot http://i68.tinypic.com/4q6a12.png
Вот мой код:
.first-row {
background-image: url('images/wtb-MapBG.png');
background-size: cover;
background-repeat: no-repeat;
position:relative;
color: white;
letter-spacing:2px;
height: 90vh;
z-index:0;
}
.inner {
position:absolute;
z-index:1;
background: url('images/wtb-Map.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 65%;
height: 85vh;
width:100%;
}
.wtbproduct {
height: 97vh;
background: url('images/wtb-Product.png');
background-position:center center;
background-size: cover;
background-repeat: no-repeat;
}
h2 {
margin-left: 80px;
margin-top: 510px;
}
.secondrowblock {
height: 97vh;
}
.text {
display: flex;
flex-direction: column;
align-self: center;
justify-content: center;
line-height: 1.7;
height: 97vh;
margin-left: 90px;
}
.text p, .text1 {
text-align: left;
font-weight:400;
font-size: 1.4em;
color:#707070;
font-size: 28px;
}
.btn.btn-default {
\t background: #FFFFFF 64bd45;
\t color: #64bd45;
text-shadow: 0 0px 0 #fff;
border: 1px solid #64bd45;
background: white;
width: 249.75px;
font-size:130%;
letter-spacing:1.5px;
margin-top: 25px;
}
.wtb-Product-Hands{
height: 80vh;
background: url('images/wtb-Product-Hands.png') no-repeat center;
background-size: cover;
}
.third-row ,.thirdrowblock7 {
height:80vh;
}
.logo {
overflow: hidden;
height: 10vh;
width:30%;
background-position:center center;
background-repeat: no-repeat;
}
.text1 :nth-child(2) {
font-size: 21px;
padding-bottom: 45px;
margin-left: 80px;
}
.text1 :nth-child(1) {
margin-top: 60px;
}
.fourth-roww {
height:50vh;
width: 100%;
}
.pictureone, .thirdrowblock {
padding: 0px;
}
.panel-heading.longbutton{
width:90%;
height: 60px;
background: #64bd45;
color: #FFFFFF ;
display:flex;
align-items: center;
justify-content: flex-start;
font-size: 150%;
padding-left: 280px;
margin-bottom: 15px;
margin-left: 50px;
}
#headingOne {
margin-top: 15vh;
}
.panel-heading a:after {
font-family: "FontAwesome";
content: "\f068";
font-style: normal;
color: white;
right: 20px;
font-size: 18px;
padding-left: 0.5em;
padding-right: 30px;
float: left;
margin-top: 6px;
font-weight: 10px !important;
}
.panel-heading a.collapsed:after {
font-family: "FontAwesome";
content: "\f067";
float: left;
margin-top: 6px;
}
a {
color: white !important;
text-decoration:none !important;
outline: none !important;
}
.email {
color:#64bd45 !important;
padding-top: 15px;
}
.well {
background: white;
border:0px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
justify-content: center;
height: 100%;
margin-top: 10px;
margin-bottom: -10px;
}
.well p {
text-align: left;
font-weight:300;
font-size: 1.4em;
color:#707070;
font-size: 20px;
}
.well :nth-child(3) {
letter-spacing:2px;
}
.well :nth-child(4) {
letter-spacing:1px;
}<body>
<!--section one-->
<div class="row first-row img-responsive">
<div class="col-sm-12 mapBG" >
<div class="inner"> </div>
</div>
<h2 class="wheretobuy"> WHERE TO BUY UPRIGHT </h2>
</div>
<!--end section one-->
<!-- section two-->
<div class="row second-row img-responsive">
<div class="col-sm-5 col-sm-offset-0 secondrowblock">
<div class="text">
<p> Find it all at</p>
<p> STORE.UPRIGHTPOSE.COM</p>
<p> Evrything you need to have </p>
<p>good posture.</p>
<button class="btn btn-default " type="button" > GO TO STORE</button>
</div>
</div>
<div class="col-sm-7 col-sm-offset-0 pictureone">
<div class="wtbproduct"></div>
</div>
</div>
<!-- end section two-->
<!-- section three-->
<div class="row third-row img-responsive">
<div class="col-sm-7 col-sm-push-5 thirdrowblock7">
<div class="row text1 center-block">
<h2> Or look for UPRIGHT at a retailer near you. </h2>
<h3> Shope in stores or buy online by cliking the logos below: </h3>
</div>
<div class="row logos img-responsive center-block">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon-de.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon-uk.png")'> </div>
<div class="clearfix visible-sm-block"> </div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-fancy.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-Bisly.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-emag.png")'> </div>
<div class="clearfix visible-sm-block"> </div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-logo-newegg.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-8ta.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-searchingC.png")'> </div>
<div class="clearfix visible-sm-block"> </div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-GadgetFlow.png")'> </div>
<div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-HardwareClub.png")'> </div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-pull-7 thirdrowblock">
<div class="wtb-Product-Hands"> </div>
</div>
</div>
<!-- end section two-->
<div class="fourth-roww">
<div class="text-center">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel-panel-default">
<div class="panel-heading longbutton" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
BECOME AN UPRIGHT DISTRIBUTOR OR RETAILER
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="well">
<p> Interested in learning more about how you can become a sales or retail partner of UPRIGHT ?</p>
<p class="email"> [email us at [email protected]] </p>
</div>
</div>
</div>
<div class="panel-panel-default">
<div class="panel-heading longbutton" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
LEARN MORE ABOUT UPRIGHT AFFILIATE PROGRAM
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="well">
<p> Make Good Posture Your Business. </p>
<p> JOIN THE UPRIGHT AFFILIATE PROGRAM </p>
<p> Make money and improve lives by directing</p>
<p> visitors to UPRIGHT products from your site or blog.</p>
<p class="email">[email us at [email protected]] </p>
</div>
</div>
</div>
</div>
</div>
<!--end section four-->
<script src = "http://code.jquery.com/jquery-3.1.0.min.js"> </script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Пожалуйста, разместите ** минимальный рабочий пример ** вашего кода (HTML/CSS/JS) в [фрагменте] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css и-HTML-код-сниппеты /). См. [Mcve] и [ask]. – vanburen
Спасибо @vanburen! Я сделал это, вы можете предложить свое решение проблемы? –