Fix width on mobile

[Marisa_Smith]

Hey @chefnewman,

Oh! When I didn’t hear anything back I thought you had solved it!

Ok I took another crack at the markdown/html/css hack and I have two solutions for you:

1. Upload your picture online (maybe via a GitHub that you can reference its URL) or use an already available online image and pass that to an <img> tag:

buff, col, buff = st.beta_columns([1.3,3,1])
col.title("Cigar Recommender")

external_churchill = '<p style="text-align:center;"><img src="https://u7.uidownload.com/vector/244/762/vector-winston-churchill-svg-eps.jpg" alt="Image churchill" width = 300> </p>'

st.markdown(external_churchill, unsafe_allow_html = True)

this gives this output:

2. With the help of @randyzwitch we mocked up an option that will allow you to pass the local file path in a similar manner to creating a download button:

with open("figures/cigar.jpeg", 'rb') as f:
        image = f.read()

image_bytes = base64.b64encode(image).decode()
local_file = f'<p style="text-align:center;"><img src="data:image/jpeg;base64,{image_bytes}" alt="Image" width = 300> </p>'

st.markdown(local_file, unsafe_allow_html = True)

this gives:

here are some links that helped me with this:

How do i align st.title?

Hello @qxlsz, Actuallly, as hinted by @nthmost, you CAN align HTML through Markdown : import streamlit as st st.markdown("<h1 style='text-align: center; color: red;'>Some title</h1>", unsafe_allow_html=True) …but unsafe_allow_html is probably going to be deprecated soon, so we can’t count on this. I tried adding a CSS file in the static folder where Streamlit is installed but no luck (EDIT : but it can work if done correctly !) There’s a feature in RISE that allows to inject …

How to Center a Picture on a Web Page Using HTML

Happy Streamlit-ing!
Marisa