【解決方法】ウェブページのレスポンシブ化で問題が発生する

[ad_1]

価格プランセクションのサイズが 735 px から均一でないなど、Web ページをレスポンシブにする際にいくつかの問題に直面しています。そして、他にもいくつかの問題があります..

私が試したこと：

ページをレスポンシブにするために最善を尽くしましたが、一部の場所はまだレスポンシブではありません..

ここにコード。

HTML

<section class="section-plans">
	<div class="row">
		<h2>Start eating Healty today</h2>
	</div>
	<div class="row">
		
		<div class="col span-1-of-3 first-box">
			<div class="plan-box">
				<div>
				<h3>Premium</h3>
				<p class="month">399$/<span>  per month</span></p>
				<p class="meal">That’s only 13.30$ per meal</p>
			</div>
			<div>
				<ul>
					<li><i class="fas fa-check icon-small"></i>1 meal every day</li>
					<li><i class="fas fa-check icon-small "></i> 24/7</li>
					<li><i class="fas fa-check icon-small"></i>Access to newest creations</li>
					<li><i class="fas fa-check icon-small"></i>Free delivery</li>
				</ul>
			</div>
			<div>
				<a href="#" class="btn btn-full">Sign-Up</a>
			</div>
		</div>

</div>




		<div class="col span-1-of-3 ">
			<div class="plan-box">
				<div>
				<h3>Pro</h3>
				<p class="month">149$/<span>per month</span></p>
				<p class="meal">That’s only 14.90$ per meal</p>
			</div>
			<div>
				<ul>
					<li><i class="fas fa-check icon-small"></i>1 meal 10 days/month</li>
					<li><i class="fas fa-check icon-small"></i>Order 24/7</li>
					<li><i class="fas fa-check icon-small"></i>Access to newest creations</li>
					<li><i class="fas fa-check icon-small"></i>Free delivery</li>
				</ul>
			</div>
			<div>
				<a href="#" class="btn btn-ghost">Sign-Up</a>
			</div>
		</div>
</div>
		<div class="col span-1-of-3">
			<div class="plan-box">
				<div>
				<h3>Starter</h3>
				<p class="month">19$/<span>per meal</span></p>
				<p class="meal">&nbsp;</p>
			</div>
			<div>
				<ul>
					<li><i class="fas fa-check icon-small"></i>1 meal</li>
					<li><i class="fas fa-check icon-small"></i>Order from 8 am to 12 pm</li>
					<li><i class="fas fa-times icon-small"></i></li>
					<li><i class="fas fa-check icon-small "></i>Free delivery</li>
				</ul>
			</div>
			<div>
				<a href="#" class="btn btn-ghost">Sign-Up</a>
			</div>
		</div>
		</div>
	</div>
</section>

CSS スタイル

CSS

.section-plans{
	background-color: #f4f4f4;
}
.section-plans h2{
margin-top: 80px;
}
.plan-box{
	background-color: #fff;
	border-radius: 5px;
	margin-left: 10%;
	width:90%;

}

.plan-box div{
	padding: 15px;
	border-bottom:1px solid #e8e8e8;
	box-shadow:0px 1px 2px #f5f2f2;
}

.month{

font-size: 300%;
margin-bottom: 20px;
font-weight: 210%;
color:#e67e22;



}
span{
	font-size: 30%;
	font-size: 300;
}
.plan-box ul{
	list-style: none;
}
.plan-box div:last-child{
	border:none;
	text-align: center;

}

.plan-box:first-child{
	background-color: #fcfcfc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

メディアの問い合わせ全体

CSS

/* Big tablet to 1200px (widths smaller taht the 1140px row) */
@media only screen and (max-width: 1200px) {
    .hero-text {
        width: 100%;
        padding: 0 2%;
    }
    
    .row { padding: 0 2%; }
}


/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
    body { font-size: 18px; }
    section { padding:60px 0px; }

    .long-copy {
        width: 80%;
        margin-left: 10%;
    }
    
    .steps-box { margin-top: 10px; }
    .steps-box:last-child { margin-top: 10px; }
    .works-steps { margin-bottom: 40px; }
    .works-step:last-of-type { margin-bottom: 60px; }
    
 .app-screen { width: 40%; }
    .steps-box:first-child { text-align: center; }
    
    
    


.icon-small{
    width: 17px;
    margin-right: 5px;

}
.city-feature{
    margin-bottom: 10px;
    font-size:100%;
}


.plan-box{
    width: 100%;
    margin-left: 0%;
}
.plan-price{
    font-size: 250%;
}
 .contact-form{
width: 80%;
 }

}

/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
    section {padding: 30px 0;}

    body { font-size: 13px; }

      .plan-box div{
       
    }
  
    
 
.plan-box{
    width:95%;

}

.first{
    font-size: 87%;
}

    .row,
    .hero-text-box {  

  
        padding: 0 4%; }
    .col { 
        width: 100%;
       
    }
        
    .main-nav {
          display:none;
    }
      
    h1 { font-size: 180%; } 
    h2 { font-size: 112%; }
    
    .long-copy  {        width: 100%;
        margin-left: 0%;
    }
    
/* Small phones: from 0 to 480px */
     @media only screen and (max-width: 480px) {

        .col {
            width: 100%;
    margin-bottom: 0 0 4% 0; 
   margin-right:  10%;

}

.contact-form{
width: 100%;
}

}

.contact-form label{

    clear: both;
float:left;
 content: "";
    clear: both;
    visibility:none;
    display: inline-block;
   
    height: 0px;
    margin-top: 20px;
}

.contact-form div{
   padding: 0;
}


.plan-box{
    margin-top: 10px;
}

.contact-form label{
    margin-left:10px;

 }