Menu

Responsive images within the course

Dear team how can I make the images with the course mobile friendly? Thank you Cora
image.png
(347 KB)
image.png
(765 KB)
1 Comment

Hi Cora,


Great question!


You can make any images that you’re using mobile friendly with a quick change in the HTML view of the editor for that page or lesson.


Once you’ve used the Insert Image button along the top of the editor to add your picture, hit <> to go to the HTML view.




Then, you just need to change the standard embed code as shown below:


Standard:

<img src="URL FOR IMAGE">


Responsive:

<img src="URL FOR IMAGE" width="100%" height="auto">


Here’s an example:



This will make the image the full width of the page - if you’d like it to take up less space then you just need to change width="100%" to a different number; e.g.


<img src="URL FOR IMAGE" width="50%" height="auto">


Once you’ve saved your changes, your image will now be responsive across screen sizes! To test this out, try dragging the size of your browser window around whilst previewing your page or lesson.


Side note: We know that HTML isn’t everyone’s cup of tea. These instructions should make it nice and easy for you to create mobile friendly images, but we’ll be working on a less technical way of doing this ASAP.


If you get stuck whilst following these instructions then we’ll be happy to lend you a hand - either comment on this thread or send us a message via the HELP page on your admin dashboard :)

Login to post a comment