Happy days. Let us get a few things cleared up:

• At this moment you have a container of 100% width, containing a div of 23% width, with an h that is 23% wide, meaning that h is only 23% of 23% wide. I would suggest removing the width of this h.
• Also: <h> doesn’t exist. <h1>, <h2>… <h6> do. Use these, and mark these up accordingly. If that becomes too ugly, only leave the anchor tag with that span inside.
• There are errors in your code. ";> is an invalid way of closing tags. Use ;"> instead.
• align:left; doesn’t work in general in the intended way.

To get to answer: while using 23% as a width, that means that you always try to fit these elements at a 23% width inside the container and that will not wrap (it will try cramming them all in). It will, as far as I know, not be possible though to achieve a perfectly responsive result without using media-queries. You can, however try setting a min-width in the four divs, with a fixed value, like 320px or so (notice they still need to fit on a mobile device). Then it will have to wrap. Additionally, you could play around with text-align, margin:auto. Bonus: try replacing display:inline-block with float:left; as that will remove the spaces between the elements. Notice that the markup might fail, and in that case add <div style="clear:both;"></div> at the bottom of that container-div.

this is a bit of an annoying one.

I’m editing HTML blocks on a Moodle site (a bit like editing content on WordPress, but with no styling options – HTML only!) – it doesn’t allow me to add any CSS. Every time I do, it deletes it upon saving my edit.

So… I’ve been trying for a while (and I’m not great at web coding btw!) to create a standard menu block using either a table or divs. I want them to fit 100% width and then stack when on mobile. Text in each block needs to be responsive as well.

I’ve been trying with inline CSS, using display:inline-block, but it never works… Don’t really udnerstand how the display thing works tbh.

Here’s my code so far – apologies, I’m not a coder – did html once decades ago!

Any help, much appreciated. Remember no CSS sheet or Media Queries – pure HTMl and inline CSS only.. Sigh…

    <div style=width:100%; height: auto; display:inline-block";>
        <div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px; padding-left:50";>

<h style="width: 25%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 25%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px; padding-left:50";>

<h style="width: 25%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px";>

<h style="width: 23%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px";>

<h style="width: 23%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>
</div>