Question 166390 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I make a div’s height mobile responsive with a variable list of items in WordPress?

I have created an HTML widget that I intent to publish on all posts on my WordPress blog.
The widget is looking fine on the browser, But it is looking a little shaky on the mobile screen.

<div class="top-box">
  <h3 id="box-heading">Our Verdict</h3>
  <p id="box-text">Considering its price point and the features it offers, the Sennheiser GSP 300 is absolutely a great choice. It might not serve
    like the top-notch gaming headsets (which are really expensive too), it will not leave you disappointed for sure. <br /><br />The headset is
    comfortable, sounds great, good-built, and is compatible with most platforms. With little cons like a non-detachable mic and no surround sound,
    it still beats some other beasts of a bit higher price points. The light-featured Sennheiser gaming headset is just right for action-packed
    gaming without burning a hole in your pocket.</p>
  <div class="Sub-box">
    <div class="sub-box-left"><span class="dashicons dashicons-yes-alt"> For</span>
      <ul id="sub-box-text">
        <li>Lightweight &amp; comfortable</li>
        <li>Crystal clear mic</li>
        <li>Great noise-cancelation</li>
        <li>Large volume dial</li>
      </ul>
    </div>
    <div class="sub-box-right"><span class="dashicons dashicons-dismiss"> Against</span>
      <ul id="sub-box-text">
        <li>Non-detachable microphone</li>
        <li>No surround-sound</li>
        <li>No chat-game audio balancer</li>
        <li>Cable can be a mess for console players</li>
      </ul>
    </div>
  </div>
  <div class="review-amazon">
    <div class="top-star">
      <p id="rating-text">Not On Top Rating</p>
      [yasr_overall_rating size="medium"]
    </div>
    <div class="check-price">
      <p class="price-check">Check Price</p>
      <a class="amazon-button" href="#">Check Price on Amazon</a>
    </div>
  </div>
</div>

css

.top-box {
  background-color: #ededed;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 25px;
  overflow: auto;
}

#box-heading {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  vertical-align: middle;
}

#box-text {
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 10px;
  color: #333;
}

.sub-box-left {
  float: left;
  width: 50%;
  padding-left: 15px;
  border-right: 1px #fff dotted;
}

.sub-box-right {
  float: right;
  width: 50%;
  padding-left: 15px;
}

#sub-box-text {
  line-height: 1.5;
  list-style: none;
  margin-bottom: 1rem;
  margin: 0;
  padding: 0;
  padding-top: 25px;
  border: 0;
  font: inherit;
  font-size: 15px;
  padding-bottom: 20px;
}

.dashicons.dashicons-yes-alt,
.dashicons.dashicons-dismiss {
  width: 100%;
  text-align: left;
  color: black;
  font-weight: 500;
  font-size: 17px;
  line-height: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}

p:empty:before {
  display: none;
}

#yasr-custom-text-before-overall {
  display: none;
}

.top-star {
  float: left;
  width: 50%;
}

.check-price {
  color: black;
  width: 50%;
  float: right;
  text-align: center;
}

.price-check {
  text-align: center;
}

#rating-text {
  text-align: left;
}

a.amazon-button {
  background-color: #5eaf16;
  padding: 7px;
  color: white;
  white-space: nowrap;
}

.review-amazon {
  padding-top: 20px;
}

.sub-box {
  padding-bottom: 10px;
}

https://notontop.com/review/headphone/sennheiser-gsp-300/

This is the sample URL where I have added the code.
[yasr_overall_rating size="medium"] is a shortcode for showing star rating for every product.

Please open the window and try changing the screen size.

Tags:

2

Answers


  1. 0

    I am not sure how this will work in WordPress but for a responsive webpage created with HTML5 and CSS, you will need a meta tag at the head of the HTML document: This is used along with Media Queries in the CSS which will make your page responsive to any device and size screen from the mobile, laptop and desktop. This is done with @media then the size screen of the device you need.

    Login or Signup to reply.
  2. 0

    You’ll have to add a media query within the css and make the items, full width / no float on mobile.

    Something Like:

    @media only screen and (max-width: 600px) {
  .check-price, .top-star {
    width: 100%;
    float: none;
    clear: both;
    margin-bottom: 20px;
  }

  .top-star div,  #rating-text {
    text-align: center;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search