Markdown
I think I’m understanding that markdown isn’t going to give me responsive images and this is throwing my formatting out when viewed on my iPhone. example here
so I’m looking for a solution
perhaps … limiting the width of an image to 500px
… can anybody give me a simple solution for my example markdown below :
 *Chevet de Notre Dame - Peter Yates ©1980*
The image should scale down to the size of the container, so I’m wondering how you have the project setup…
Perhaps share your project via Elements Cloud and we can take a look?
just from looking at the code of the page, it seems you have a pixel width set on the Image of 380px.
Set the Image width to whatever you need, this can even be overridden across devices 
What is the difference between 100% and Auto? @ben
Thanks guys - they’re inside a flex, so I’d expect them to be automagically responsive
I’m sure I’m just making a silly mistake … please take a look when you have a mo.
Many thanks, Jol
elementsapp://downloadDocument/k7gDvVB83H7l
I’m also struggling with my blog’s ‘top menu’ - any suggestions gratefully received !
Jol
: )
100%: will stretch the image to fill the available space in the parent, if the image is not naturally large enough already. Or shrink it if it’s to large naturally.
Auto: will shrink the image if its to large naturally, but will not stretch it to fill the available space in the parent if it not already naturally that wide.
EDIT:
Having said that.. Elements does not work like this, as the sizing you define in the image component are not applied to the image it’s self, they are applied to the parent div, so milage may vary.
@jbob you’re setting a pixel width on some of your images. When you do this it forces the image to be that width, even if the screen size is smaller. This is why you’re getting issues.
I’d recommend never setting a pixel value on images, not if you want your site to be responsive and just work on all screen sizes. You’re better off seeing it to “Auto” or setting a % value.
Hope that helps.
OK - I’m gonna try that … thank you so much Dan !!
I’ve tried assigning no size to the primary image on the blog and on the post page
It doesn’t help
On my (iPhone 13) - the header makes it most the way across the screen and the lower image goes off page to the right
I’m prolly doing something else that’s stoopid ?
So image size must be set to 100% in order to fit to the container / flex ?
on my desktop, I use dark mode all the time, didn’t notice these until your post above
Thank you - Dark mode will be my next battle Steve : )
not sure if this helps
Think you’re onto something Steve !!
Tailwind units are 4px - so padding 5 = 20px, both sides = 40px, image in pixels plus padding = ?
more than the width of the screen?, this is without responsive control
eg padding 40px + 400px (image) = 440px
you can set different % for each screen size as well
OK - some progress made here - but my original question is still …
Like on the following page … if you’re calling images within your markup post - naturally they’ll be width that you set the post - unless you say otherwise, so how do you say otherwise.
The markup blog is calling an image using ! whatever - but is displaying it as big as it can within the post container.
Sure you can control the size of the ‘featured image’ - but what about images you’re calling within the post ?
In the example - we control the featured image just fine - but the other images will just be the size they are (unless we somehow specify that in Markup !?? … or am I misunderstanding something
Working on my iPhone now, not sure what you are trying to say
