मेरे पास यह है, जो मूल रूप से एक तालिका है, जिसमें दो कॉलम हैं, और मैं उक्त तालिका में तत्वों को मोबाइल उत्तरदायी बनाने की पूरी कोशिश कर रहा हूं:

setTimeout(function() {
         odometer.innerHTML = '1925'
     })
.fiftyFiftySection {
    background-color: #000;
  }
  .odometer {
    font-size: 3em;
    text-align: center;
    width: 180px;
  }
    table td{
      column-width: 1000px;
      text-align: center;
  }
  #dollarSign {
    height: 50px; 
    width: 30px;
    }
    #fiftyFiftySignImage {
      width:400px; 
      height:300px; 
      margin-left: -100px;
    }
  @media (max-width: 500px) {
    table td{
      column-width: 100px;
      text-align: left;
    }
    #dollarSign {
      /* uncomment out display when you want it to display */
      /* display: none; */
      width: 20px;
      height: 20px;
    }
    #currentEstimatedPayout {
      display: none;
    }
    #odometer {
      margin-right: 50px;
      margin-top: 20px;
    }
    #fiftyFiftySignImage {
      width:300px; 
      height:200px;
      margin-left: -50px;
    }
  }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"> 
    <script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script>
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th> 
    </tr>
    <tr>
      <td>
        <img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
      </td> 
      <td>
        <h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

लेकिन जैसा कि आप देख सकते हैं, मोबाइल संस्करण पर, यह dollar sign image को ओडोमीटर के ऊपर रखता है, जब मुझे इसकी आवश्यकता होती है! मुझे नहीं पता कि इसे कैसे ठीक किया जाए, मैंने कई अलग-अलग चीजों की कोशिश की है। कोई विचार?

0
gianlps 22 नवम्बर 2021, 17:54
<div> डिफ़ॉल्ट रूप से आवंटित पूरी चौड़ाई लेते हैं। मैं या तो आपकी डॉलर साइन इमेज और ओडोमीटर को फ़्लोट के साथ स्टाइल करूँगा या आपके ओडोमीटर को span में बदल दूंगा।
 – 
user1599011
22 नवम्बर 2021, 17:57
डेटा प्रदर्शित करने के लिए तालिकाओं का उपयोग किया जाना चाहिए, न कि लेआउट बनाने के लिए। अधिक आधुनिक समाधान फ्लोट्स, फ्लेक्सबॉक्स या ग्रिड का उपयोग कर रहे हैं
 – 
DarkBee
22 नवम्बर 2021, 18:06

2 जवाब

सबसे बढ़िया उत्तर

एक div जोड़ें और संरेखित करने के लिए फ्लेक्स का उपयोग करें।

setTimeout(function() {
         odometer.innerHTML = '1925'
     })
.fiftyFiftySection {
    background-color: #000;
  }
  .odometer {
    font-size: 3em;
    text-align: center;
    width: 180px;
  }
    table td{
      column-width: 1000px;
      text-align: center;
  }
  #dollarSign {
    height: 50px; 
    width: 30px;
    }
    #fiftyFiftySignImage {
      width:400px; 
      height:300px; 
      margin-left: -100px;
    }
  @media (max-width: 500px) {
    table td{
      column-width: 100px;
      text-align: left;
    }
    #dollarSign {
      /* uncomment out display when you want it to display */
      /* display: none; */
      width: 20px;
      height: 20px;
    }
    #currentEstimatedPayout {
      display: none;
    }
    #odometer {
      margin-right: 50px;
      margin-top: 20px;
    }
    #fiftyFiftySignImage {
      width:300px; 
      height:200px;
      margin-left: -50px;
    }
  }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"> 
    <script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script>
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th> 
    </tr>
    <tr>
      <td>
        <img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
      </td> 
      <td>
        <h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <div style="
display: flex;
justify-content: center;
align-items: center;
">
        <img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div>

      </td>

    </tr>
  </table>
</section>
2
Imanpal Singh 22 नवम्बर 2021, 17:58
यह वास्तव में शानदार है। शुक्रिया। केवल एक चीज है, मोबाइल पर, यह odometer की चौड़ाई को छोटा कर देता है, लेकिन अब मैं यह नहीं समझ सकता कि नए कोड के कारण इसकी चौड़ाई को कैसे समायोजित किया जाए। क्या आप मुझे सही दिशा में निर्देशित कर सकते हैं?
 – 
gianlps
22 नवम्बर 2021, 18:27
कोई बात नहीं, मुझे मिल गया!
 – 
gianlps
22 नवम्बर 2021, 18:30

इस कोड का प्रयोग करें।

#dollarSign {
    vertical-align: middle;
}
0
Sato Takeru 22 नवम्बर 2021, 17:58