响应式设计不适用于卡片[HTML & CSS]

eeq64g8w 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(143)

我的网站有问题。当我打开https://www.b3lieve.com.mx/precios.html时，card-prices部分工作正常（如果它在电脑中）。但如果我在移动的中或使用响应式设计工具可视化同一部分，它不工作或没有设计。我该怎么办？visualized from responsive design tool visualized from computer
我试过从localhost和它的工作正确，无论是计算机或响应设计。可能是一个问题，我的托管服务？
这是密码...
`

<div class="packs" style="padding-top:80px;">
        <h2 style="text-align:center;">Booth 360°</h2>
        <div class="pricing-table" id="360">
            <div class="pricing-card">
              <h3 class="pricing-card-header">B&aacute;sico</h3>
              <div class="price"><sup>$</sup>5,300 MXN</div>
              <ul>
                <li><strong>1</strong> Booth 360°.</li>
                <li><strong>2</strong> horas de servicio.</li>
                <li><strong>2</strong> personas de Staff.</li>
                <li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
                <li><strong>2</strong> templates diferentes y props.</li>
                <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
              </ul>
              <a href="/contact.html" class="order-btn">Seleccionar</a>
            </div>
           </div>
    
           <div class="pricing-table">
            <div class="pricing-card">
              <h3 class="pricing-card-header">Cl&aacute;sico</h3>
              <div class="price"><sup>$</sup>6,800 MXN</div>
              <ul>
                <li><strong>1</strong> Booth 360°.</li>
                <li><strong>3</strong> horas de servicio.</li>
                <li><strong>2</strong> personas de Staff.</li>
                <li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
                <li><strong>4</strong> templates diferentes y props.</li>
                <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
              </ul>
              <a href="/contact.html" class="order-btn">Seleccionar</a>
            </div>
           </div>
           
           <div class="pricing-table">
            <div class="pricing-card">
              <h3 class="pricing-card-header">Pr&eacute;mium</h3>
              <div class="price"><sup>$</sup>8,300 MXN</div>
              <ul>
                <li><strong>1</strong> Booth 360°.</li>
                <li><strong>5</strong> horas de servicio.</li>
                <li><strong>2</strong> personas de Staff.</li>
                <li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
                <li><strong>6</strong> templates diferentes y props.</li>
                <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
              </ul>
              <a href="/contact.html" class="order-btn">Seleccionar</a>
            </div>
           </div>
    
           <div class="pricing-table">
            <div class="pricing-card">
              <h3 class="pricing-card-header">Personalizado</h3>
              <div class="price">Cont&aacute;ctanos</div>
              <ul>
                <li><strong>1</strong> Booth 360°.</li>
                <li><strong>?</strong> horas de servicio.</li>
                <li><strong>2</strong> personas de Staff.</li>
                <li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
                <li><strong>?</strong> templates diferentes y props.</li>
                <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
              </ul>
              <a href="/contact.html" class="order-btn">Seleccionar</a>
            </div>
            </div> <!-- CABINA 360 -->

                <br>
                <br>
                <br>

            <h2 style="text-align:center;">Magic Mirror Booth</h2>
            <div class="pricing-table">
                <div class="pricing-card" id="mirror">
                  <h3 class="pricing-card-header">B&aacute;sico</h3>
                  <div class="price"><sup>$</sup>5,900 MXN</div>
                  <ul>
                    <li><strong>1</strong> Booth Magic Mirror.</li>
                    <li><strong>2</strong> horas de servicio.</li>
                    <li><strong>2</strong> personas de Staff.</li>
                    <li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
                    <li><strong>2</strong> templates diferentes y props.</li>
                    <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
                  </ul>
                  <a href="/contact.html" class="order-btn">Seleccionar</a>
                </div>
               </div>
        
               <div class="pricing-table">
                <div class="pricing-card">
                  <h3 class="pricing-card-header">Cl&aacute;sico</h3>
                  <div class="price"><sup>$</sup>7,400 MXN</div>
                  <ul>
                    <li><strong>1</strong> Booth Magic Mirror.</li>
                    <li><strong>3</strong> horas de servicio.</li>
                    <li><strong>2</strong> personas de Staff.</li>
                    <li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
                    <li><strong>4</strong> templates diferentes y props.</li>
                    <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
                  </ul>
                  <a href="/contact.html" class="order-btn">Seleccionar</a>
                </div>
               </div>
               
               <div class="pricing-table">
                <div class="pricing-card">
                  <h3 class="pricing-card-header">Pr&eacute;mium</h3>
                  <div class="price"><sup>$</sup>9,900 MXN</div>
                  <ul>
                    <li><strong>1</strong> Booth Magic Mirror.</li>
                    <li><strong>5</strong> horas de servicio.</li>
                    <li><strong>2</strong> personas de Staff.</li>
                    <li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
                    <li><strong>6</strong> templates diferentes y props.</li>
                    <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
                  </ul>
                  <a href="/contact.html" class="order-btn">Seleccionar</a>
                </div>
               </div>
        
               <div class="pricing-table">
                <div class="pricing-card">
                  <h3 class="pricing-card-header">Personalizado</h3>
                  <div class="price">Cont&aacute;ctanos</div>
                  <ul>
                    <li><strong>1</strong> Booth Magic Mirror.</li>
                    <li><strong>?</strong> horas de servicio.</li>
                    <li><strong>2</strong> personas de Staff.</li>
                    <li>Fotos<strong> ilimitados</strong> durante todo el servicio.</li>
                    <li><strong>?</strong> templates diferentes y props.</li>
                    <li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
                  </ul>
                  <a href="/contact.html" class="order-btn">Seleccionar</a>
                </div>
               </div>

           
       </div>

.pricing-table{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(1600px, 100%);
}

.pricing-card{
  flex: 1;
  max-width: 360px;
  background-color: #17173d;
  margin: 20px 10px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  color: #f9f9f9;
  transition: .3s linear;
  border-radius: 20px;
}

.pricing-card-header{
  background-color: var(--majorelle-blue);
  display: inline-block;
  color: #fff;
  padding: 12px 30px;
  border-radius: 0 0 20px 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  transition: .4s linear;
}

.pricing-card:hover .pricing-card-header{
  box-shadow: 0 0 0 26em var(--majorelle-blue);
}

.price{
  font-size: 35px;
  color: var(--majorelle-blue);
  margin: 40px 0;
  transition: .2s linear;
}

.price sup{
  font-size: 22px;
  font-weight: 700;
}

.pricing-card:hover ,.pricing-card:hover .price{
  color: #fff;
} 

.pricing-card li{
  font-size: 16px;
  padding: 10px 0;
  text-transform: uppercase;
}

.order-btn{
  display: inline-block;
  margin-bottom: 40px;
  margin-top: 80px;
  border: 2px solid var(--majorelle-blue);
  color: var(--majorelle-blue);
  padding: 18px 40px;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 500;
  transition: .3s linear;
}

.order-btn:hover{
  background-color: var(--majorelle-blue);
  color: #fff;
}

@media screen and (max-width:1100px) {
  .pricing-card{
    flex: 50%;
  }
}

`

css

来源：https://stackoverflow.com/questions/74454076/responsive-design-isnt-working-on-cards-html-css

3条答案

按热度按时间

wj8zmpe11#

你只是没有关闭第一个和第二个@媒体查询，就是这样。

@media (min-width: 450px) {
  
    /**
     * HERO
     */
  
    .hero-form { position: relative; }
    
  
    .email-field {
      margin-bottom: 0;
      padding-right: 155px;
    }
  
    .hero .btn-primary {
      position: absolute;
      top: 5px;
      right: 5px;
      padding-block: 12.5px;
    }
    .hero-ctc .btn-primary {
      position: absolute;
      top: 5px;
      right: 5px;
      padding-block: 12.5px;
    }
  } /* this wasn't closed */
  
  @media (min-width: 450px) {
  
    /**
     * HERO
     */
  
    .hero-form { position: relative; }
  
    .email-field {
      margin-bottom: 0;
      padding-right: 155px;
    }
  
    .hero .btn-primary {
      position: absolute;
      top: 5px;
      right: 5px;
      padding-block: 12.5px;
    }
    .hero-ctc .btn-primary {
      position: absolute;
      top: 5px;
      right: 5px;
      padding-block: 12.5px;
    }
}  /* this wasn't closed */

赞(0）回复(0）举报 2022-11-19

n3ipq98p2#

看看你的CSS。你有...

@media (min-width: 450px) {

  /**
   * HERO
   */

  .hero-form { position: relative; }

  .email-field {
    margin-bottom: 0;
    padding-right: 155px;
  }

  .hero-ctc .btn-primary {
    position: absolute;
    top: 5px;
    right: 5px;
    padding-block: 12.5px;
  }

  /**
   * ABOUT
   */

  .about-card .card-text {
    max-width: 300px;
    margin-inline: auto;
  }

}

...作为应用于移动的设备的样式的最小宽度。（顺便说一句，由于某种原因，您在最小宽度为450像素的情况下有三次完全相同的@媒体定义...也许是复制和粘贴错误？）
然后，如果您查看响应视口中的尺寸（如提供的屏幕截图所示），您可以看到宽度为414。如果您将视口屏幕向右拖动或将宽度设置为450或更大，则将显示样式。
如果你觉得有必要的话，你可以在css中定义更小的最小宽度尺寸，注意你的定义从最小开始，一直到最大。

赞(0）回复(0）举报 2022-11-19

uyto3xhc3#

从第791行到第871行有几个复制和粘贴CSS媒体查询。
大多数CSS类和属性都是相同的。
但我觉得问题出在你style.css的第819行你开了一个@media（min-width：450 px），但在第844行没有关闭。
You forgot to close braces here
那应该会很管用
Mobile view with close braces modification

赞(0）回复(0）举报 2022-11-19

我来回答

响应式设计不适用于卡片[HTML & CSS]

3条答案

相关问题

热门标签

最新问答