HTML Relative font is too large

user_10673107 0
Viewed 121

I have a problem. I created the following page:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #DADADA;
    width: 100%;
}

.title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
}

#coinData {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding-top: 30px;
}

#coin1Data {
    background-color: #7AAED3;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#coin2Data {
    background-color: #7AD39E;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

.coin-candlesticks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 5px;
    width: 95%;
    margin: auto auto;
    padding-bottom: 15px;
}

.candlestickImage {
    max-width:100%;
    max-height:100%;
    height:auto;
}

.coin-price {
    margin: auto auto;
    padding-bottom: 15px;
    margin: auto auto;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}


#newOrderControl {
    width: max-content;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    font-size: 14px;
    padding: 0px 10px;
  }
  
  #newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 5px;
    column-gap: 20px;
    padding-bottom: 20px;
    justify-items: end;
  }

  #newOrderInputFields input {
    width: 160px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
  }
  
  #newOrderButtons {
    align-self: flex-end;
    padding-bottom: 20px;
  }
  
  #newOrderButtons button {
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    padding: 0px 5px;
  }
  
  .btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
  }
  
  #btnTakeProfit {
    background-color: #33AB37;
  }
  
  #btnPlaceOrder {
    background-color: #6DA0ED;
  }
  
  #orderHistory {
    margin-top: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: 100%;
}

#orderHistoryContent {
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
    font-size: 0.9vw;
    padding: 0px;
    right: 0px;
}

#orderHistoryContent div {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    padding: 2px;
}


.order-history-header {
    font-weight: bold;
}

/* #orderHistoryContent label {
    font-size: calc(0.3em + 1vw)
} */


#agentPortfolio {
    padding-top: 20px;
    display: grid;
    grid-template-columns: min-content auto;
}

#portfolio {
    background-color: #F5F5D3;
    width: 190px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#portfolioContent {
    font-size: 14px;
    display: grid;
    grid-template-columns: 60% auto;
}

.portfolio-header {
    display: block;
    padding: 1px 0px;
    font-weight: bold;
    padding-left: 5px;
}

.portfolio-value {
    display: block;
    padding: 1px 0px;
    text-align: right;
    padding-right: 5px;
}


#wallet {
    background-color: #D8F1FF;
    width: 700px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#walletContent {
    font-size: 14px;
    display: block;
}

.wallet-coin {
    display: grid;
    grid-template-columns: 10% 12% 15% 15% 18% 15% 15%;
    padding: 0px 5px;
}

.wallet-number {
    text-align: right;
}

.wallet-header {
    font-weight: bold;
}

#topBar {
    height: 30px;
}

#comboBoxAgent {
    width: 400px;
    height: 100%;
}

#comboBoxCoin1 {
    min-width: 60px;
    height: 100%;
}

#comboBoxCoin2 {
    min-width: 60px;
    height: 100%;
}

#btnToggleAgent {
    float: right;
    height: 100%;
    min-width: 60px;
    width: 70px;
    border-radius: 10px;
    font-size: 18px;
    color: white;
}
<body>

        <div id="topBar">
            <select id="comboBoxAgent"></select>
            <select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()"></select>
            <select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()"></select>
            <button id="btnToggleAgent" onclick="toggleActive()"></button>
        </div>

        <div id="agentPortfolio">
            <div id="portfolio">
                <label class="title">Agent</label>
                <div id="portfolioContent">
                    <div><label class="portfolio-header">Market value:</label></div>
                    <div><label class="portfolio-value" id="marketValue"></label></div>

                    <label class="portfolio-header">Portfolio value:</label>
                    <label class="portfolio-value" id="portfolioValue"></label>

                    <label class="portfolio-header">Total value:</label>
                    <label class="portfolio-value" id="totalValue"></label>

                    <label class="portfolio-header">Overall profit $:</label>
                    <label class="portfolio-value" id="overallProfitUSDT"></label>

                    <label class="portfolio-header">Overall profit %:</label>
                    <label class="portfolio-value" id="overallProfitPerc"></label>
                </div>
            </div>
            <div id="wallet">
                <label class="title">Wallet</label>
                <div id="walletContent">
                    <div class="wallet-coin">
                        <div class="wallet-market wallet-header">
                            <span>Market:</span>
                        </div>
                        <div class="wallet-coin wallet-header">
                            <span>Coin:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Quantity:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Value:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Avg Price:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Profit $:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Profit %:</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="coinData">
            <div id="coin1Data">
                <label id="coin1Title" class="title"></label>
                <div class="coin-price">
                    <span id="coin1Price"></span>
                </div>
                <div id="coin1Candlesticks" class="coin-candlesticks">
                </div>
            </div>
            <div id="coin2Data">
                <label id="coin2Title" class="title"></label>
                <div class="coin-price">
                    <span id="coin2Price"></span>
                </div>
                <div id="coin2Candlesticks" class="coin-candlesticks">
                </div>
            </div>
        </div>

        <div id="newOrderControl">
            <label class="title">New order</label>
            <div id="newOrderInputFields">
                <div class="inputField">
                <label>Action:</label>
                <select id="txtOrderAction">
                    <option value="">-</option>
                    <option value="Buy">Buy</option>
                    <option value="Sell">Sell</option>
                </select>
                </div>
                <div class="inputField">
                <label>Quantity:</label>
                <input type="text" id="txtOrderQuantity">
                <button class="btnAll" onclick="setAllQuantity()">All</button>
                </div>
                <div class="inputField">
                <label>Target price:</label>
                <input type="text" id="txtOrderTargetPrice">
                </div>
                <div class="inputField">
                <label>Target perc:</label>
                <input type="text" id="txtOrderTargetPerc">
                </div>
                <div class="inputField">
                <label>Coin:</label>
                <select id="txtOrderCoin">
                    <option value="">-</option>
                    <option value="">SPTF</option>
                    <option value="">TLS</option>
                </select>
                </div>
                <div class="inputField">
                <label>Amount:</label>
                <input type="text" id="txtOrderAmount">
                <button class="btnAll" onclick="setAllAmount()">All</button>
                </div>
                <div class="inputField">
                <label>Limit price:</label>
                <input type="text" id="txtOrderLimitPrice">
                </div>
                <div class="inputField">
                <label>Limit perc:</label>
                <input type="text" id="txtOrderLimitPerc">
                </div>
            </div>
            <div id="newOrderButtons">
                <button id="btnTakeProfit">Take profit</button>
                <button id="btnPlaceOrder">Place order</button>
            </div>
        </div>

        <div id="orderHistory">
            <label class="title">Order history</label>
            <div id="orderHistoryContent">
                <div class="order-history-header">
                    <label>Action</label>
                </div>
                <div class="order-history-header">
                    <label>Market</label>
                </div>
                <div class="order-history-header">
                    <label>Coin</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeEntered</label>
                </div>
                <div class="order-history-header">
                    <label>Quantity</label>
                </div>
                <div class="order-history-header">
                    <label>Amount</label>
                </div>
                <div class="order-history-header">
                    <label>Target price</label>
                </div>
                <div class="order-history-header">
                    <label>Limit price</label>
                </div>
                <div class="order-history-header">
                    <label>Price</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeExecuted</label>
                </div>
                <div class="order-history-header">
                    <label>Status</label>
                </div>
                <div class="order-history-header">
                    <label>Profit</label>
                </div>
            <div style="background-color: rgb(251, 216, 255);">             <label>Buy</label>         </div>         <div style="background-color: rgb(255, 255, 255);">             <label>USDT</label>         </div>         <div style="background-color: rgb(220, 255, 193);">             <label>BTC</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>2021-05-08 00:00:00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>999999.00000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>56723.640000</label>         </div>         <div style="background-color: rgb(251, 255, 191);">             <label></label>         </div>         <div style="background-color: rgb(137, 186, 255);">             <label>New</label>         </div>         <div style="background-color: rgb(251, 216, 255);">             <label></label>         </div></div>
        </div>

</body>

The reason I shared the entire page is because I think all parts are working separately from each other, but when they come together in a page it gets messed up. Now the problem is not on a pc but on a mobile phone. I have the problem on my OnePlus 8T with a resolution of 1080 X 2400. To make the problem accesable for all of you, I tested it on an android emulator with the same resolution and android version 11 as my phone and got the problem as well. Here is an image of the result I get: enter image description here

As you can see the grid of the orderHistory is cropped and the fonts are way too large. I have tested with firefox on the same device, but then it works like a charm. The wanted result is to see the order history that has small fonts so everything fits on 1 line.

I already figured out that when you completly remove the <div id="agentPortfolio"> with all the content inside that div, the problem is solved, so what is going wrong with this combination?

I hope I have provided enough information about what the problem is and how to replicate it, so you can help me figure this out :)

css html
3 Answers

I would recommend using word-wrap primitive in the CSS. Something like:

word-wrap: break-word;

I would even consider using some other measurement unit like rem or em.

I write you here what you should consider for your mobile grid. Update the grid columns template like this in a media query:

grid-template-columns: repeat(auto-fill, minmax(7.5vw, max-content));

user_115743130

you can add a media Queries to you css file and it will work I checked it so if the width is under 700px the styles inside media queries will be applied :

#orderHistory {
    margin-top: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: 100%;
}

#orderHistoryContent {
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
}

#orderHistoryContent div {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    padding: 2px;
}

.order-history-header {
    font-weight: bold;
}

#orderHistoryContent label {
    font-size: calc(0.2em + 1vw)
}

.title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
}
@media screen and (max-width: 700px){
    #orderHistoryContent {
        padding:0;
    }

    #orderHistoryContent div { font-size: 1vw;}

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="orderHistory">

            <label class="title">Order history</label>
            <div id="orderHistoryContent">
                <div class="order-history-header">
                    <label>Action</label>
                </div>
                <div class="order-history-header">
                    <label>Market</label>
                </div>
                <div class="order-history-header">
                    <label>Coin</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeEntered</label>
                </div>
                <div class="order-history-header">
                    <label>Quantity</label>
                </div>
                <div class="order-history-header">
                    <label>Amount</label>
                </div>
                <div class="order-history-header">
                    <label>Target price</label>
                </div>
                <div class="order-history-header">
                    <label>Limit price</label>
                </div>
                <div class="order-history-header">
                    <label>Price</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeExecuted</label>
                </div>
                <div class="order-history-header">
                    <label>Status</label>
                </div>
                <div class="order-history-header">
                    <label>Profit</label>
                </div>
            <div style="background-color: rgb(251, 216, 255);">             <label>Buy</label>         </div>         <div style="background-color: rgb(255, 255, 255);">             <label>USDT</label>         </div>         <div style="background-color: rgb(220, 255, 193);">             <label>BTC</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>2021-05-08 00:00:00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>999999.00000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>56723.640000</label>         </div>         <div style="background-color: rgb(251, 255, 191);">             <label></label>         </div>         <div style="background-color: rgb(137, 186, 255);">             <label>New</label>         </div>         <div style="background-color: rgb(251, 216, 255);">             <label></label>         </div></div>
        </div>
</body>
</html>

user_154871840

Use a Viewport Meta Tag.

Add this to the <head> of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

It'll make the body resize according to screen width. MDN

user_133311550
Related