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)

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 :)

This is exactly what I need, but every time I try to change the source code in HTML view it will not save. It allows me to input what I need, but then I click save, leave that view, and when I go back in the view the source code is back to the previous setting and no longer responsive. Am I missing something?

Hi Carson!


Froala can be quite sensitive and picky to HTML code and stripping out certain bits of code. If you can send along an email to info@thinkific.com we can look into this. If you can include your site address, and details of where and what you are trying to change, we can take a look!

Login to post a comment