t
I have been working on a small page with HTML and CSS so I can load the realtime XRP CAD chart inside my own layout and check it quickly without jumping between tabs. The core idea is simple, keep the page lightweight and let an iframe do the heavy lifting while I control sizing and layout. I added a header, a short description and the iframe itself so everything sits in one spot.
Here is the basic HTML I used
<div class="chart-container">
<h2>XRP CAD Realtime Chart</h2>
<iframe
src="
"
frameborder="0"
allowfullscreen>
</iframe>
</div>
The interesting part is the CSS because I want this to be responsive even on smaller screens. The approach I used is a percentage based aspect ratio container so the iframe scales with width but keeps its height proportional. This avoids the iframe spilling out on phones or looking tiny on tablets.
.chart-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.chart-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
I also add a max width on larger screens and some simple font sizing so the header does not dominate when you open the page on a phone. The goal is a single page where the chart is the focus and it adapts cleanly to any device. It has been useful for me to see the market without clutter and to check levels quickly on the go. If you want I can turn this into a quick tutorial with steps, or add a small script to reload the iframe every few minutes so the feed feels even fresher.
I have been working on a small page with HTML and CSS so I can load the realtime XRP CAD chart inside my own layout and check it quickly without jumping between tabs. The core idea is simple, keep the page lightweight and let an iframe do the heavy lifting while I control sizing and layout. I added a header, a short description and the iframe itself so everything sits in one spot.
Here is the basic HTML I used
<div class="chart-container">
<h2>XRP CAD Realtime Chart</h2>
<iframe
src="
"
frameborder="0"
allowfullscreen>
</iframe>
</div>
The interesting part is the CSS because I want this to be responsive even on smaller screens. The approach I used is a percentage based aspect ratio container so the iframe scales with width but keeps its height proportional. This avoids the iframe spilling out on phones or looking tiny on tablets.
.chart-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.chart-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
I also add a max width on larger screens and some simple font sizing so the header does not dominate when you open the page on a phone. The goal is a single page where the chart is the focus and it adapts cleanly to any device. It has been useful for me to see the market without clutter and to check levels quickly on the go. If you want I can turn this into a quick tutorial with steps, or add a small script to reload the iframe every few minutes so the feed feels even fresher.
