-
|
Is it possible to have two images next to each other horizontally? I've tried to use align left and right with image size and that works on one monitor size but not when that size changes. It tries to fix text under the images in the space instead of just leaving that space blank. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 9 replies
-
|
You don't need to specify alignment if you wish to render images next to each other. Just define them one after another in Markdown, they are rendered as inline elements by default: 
If you add an empty line after those images, text will start in a new paragraph. |
Beta Was this translation helpful? Give feedback.
-
|
this doesn't seem to work for me, presumably because the images are too large. |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately this approach did not work for me when trying to center 2 side-by-side images using Places them side-by-side ✔️ {: style="height:83px"}
{: style="height:83px"}Puts them on new lines ❌ <figure markdown>
{: style="height:83px"}
{: style="height:83px"}
<figcaption>Partners</figcaption>
</figure>Got the idea for using figure from the docs but curious if there is a better approach. @squidfunk Is there anything you'd recommend? |
Beta Was this translation helpful? Give feedback.
-
|
I'm looking to do the same thing. When I do all of the above the result is the images don't render but they do appear to be centered? Help?
|
Beta Was this translation helpful? Give feedback.
-
|
Hello @OzGav, If everything is enabled properly, first try to add only 1 image as perhaps some syntax issues is there? |
Beta Was this translation helpful? Give feedback.
-
|
OK thanks @kamilkrzyskow that has sort of fixed my problem. I had many extensions but not that one. However, whilst the icons are centred they are all one under the other like so:
What I want is for them to be centred and all in a line spilling over and centring as required depending on width of the display so something like:
This is what I currently have |
Beta Was this translation helpful? Give feedback.
-
|
I am not a CSS wizard but this sounds like a use case for CSS flexboxes? See the documentation for adding extra CSS. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for that. I’m not a CSS wizard either but I’ll see if I can get my head around it. |
Beta Was this translation helpful? Give feedback.
-
|
Grid cards seem to provide a nice solution (size of images is adjusted automatically). For example: <div class="grid cards" markdown>
- Daily distance entire challenge
---
- Daily distance post-challenge
---
- Daily distance last month of challenge
---
- Daily step count last month of challenge
---
</div>This even plays nicely with |
Beta Was this translation helpful? Give feedback.
-
None that I know of. You can also use images with the block syntax (mind the blank lines): <div class="grid" markdown>
</div>
The images will stretch to the viewport and switch to 1-column layout on mobile. |
Beta Was this translation helpful? Give feedback.
You don't need to specify alignment if you wish to render images next to each other. Just define them one after another in Markdown, they are rendered as inline elements by default:
If you add an empty line after those images, text will start in a new paragraph.