Changing width of a metric card using css

Using Streamlit
,
1

I’m trying to change the width of the metric card using css, but not quote sure where that’s done.

This is what i see in inspect

<div width="474" data-testid="stVerticalBlock" class="st-emotion-cache-jqs80i e1f1d6gn2"><div data-stale="false" width="474" class="element-container st-emotion-cache-1wwr8gw e1f1d6gn4" data-testid="element-container"><div data-testid="stMetric"><label data-testid="stMetricLabel" visibility="0" class="st-emotion-cache-xsb60e e1i5pmia2"><div class="st-emotion-cache-1wivap2 e1i5pmia3"><div data-testid="stMarkdownContainer" class="st-emotion-cache-1k4mba9 e1nzilvr5"><p>Reach</p></div></div></label><div data-testid="stMetricValue" class="st-emotion-cache-1xarl3l e1i5pmia1"><div class="st-emotion-cache-1wivap2 e1i5pmia3"> 57,184,928 </div></div></div></div></div>

This is what i’m doing in css but its not affecting the metric card on the page.

.stMetric {width: 200}

important to note that i’m using streamlit-extras for other styling on the metric card
this runs toward the end of the app, the css runs at the top.

from streamlit_extras.metric_cards import style_metric_cards
            style_metric_cards(border_left_color="#8458B3",background_color='#e5eaf5',border_color="#8458B3",border_radius_px=70)
2

whoops, solved my own error there, was missing all the required syntax

div[data-testid="stVerticalBlock"] > div[data-testid="element-container"] {
  width: 200px;
}```
1 Like
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.