LMS courses and image dimensions

Hello,

It seems you’ve made adjustments to the image dimensions, but perhaps the changes haven’t been immediately noticeable. Let’s troubleshoot together.

Setting an image to 1920:1080 means specifying its dimensions in pixels. In this case, 1920 pixels wide and 1080 pixels high. This is a common aspect ratio used for images, especially in web design, as it matches the dimensions of a standard HD (high-definition) display.

On the other hand, stating that the images should have a 2:1 ratio means that the width of the image is twice the height. For instance, if the height is 100 pixels, then the width would be 200 pixels. This aspect ratio is often used for aesthetic reasons and can result in visually pleasing compositions.

The main difference between the two is in how the dimensions are specified. “1920:1080” explicitly defines the width and height of the image, while “2:1” defines the relationship between the width and height without specifying the exact pixel dimensions.

In practical terms, if you want images with dimensions of 1920 pixels wide and 1080 pixels high, you would set the aspect ratio to 16:9 (which is the same as 1920:1080) or directly specify the width and height in pixels.

Allow me to present alternative choices for modifying and experimenting with the images on the course cards, tailored to whatever your objective may be. Could you try altering the “Courses Per Row” setting to see if it affects the display of the images. Additionally, experimenting with different card styles might reveal the changes you’ve implemented.

Another option worth exploring is creating a new page layout using Elementor and incorporating the Courses widget

Edit courses page using Elementor (screenshot)

This method grants more control over image sizes and layout. Here’s how you can do it:

1. Add the Courses widget to your page.
2. Navigate to the “Style” tab.
3. Scroll down to the “Card: Image” section.
4. Here, you’ll find options to adjust the image size of the cards.

Remember to select the newly created course page as the archive page for courses. You can do this by navigating to LMS LMS > Settings > Courses > Courses Page, and then choosing your page from the dropdown menu (screenshot)

Feel free to customize the image sizes to your preference. If you encounter any further issues or need assistance, don’t hesitate to reach out.

Best regards.

Lisa and support team

• This reply was modified 6 months ago by Lisa StylemixThemes.

Thank you for your answer, Lisa. ??

However, I do not use Elementor, it slows down the pages and has a lot of rubbish code that it disperses everywhere. Is there maybe a CSS code that I could use to change the 2:1 dimensions to 16:9 or something like this? ??

I also have been to the section you have mentioned but anyway what I insert there it makes no changes. I have set the dimensions from 200×100 to 480×270, but nothing happened.

• This reply was modified 6 months ago by achimfalk.
• This reply was modified 6 months ago by achimfalk.

Hey @achimfalk

I understand that you prefer not to use Elementor due to its impact on page speed. Let’s focus on finding a CSS solution instead.

To adjust the dimensions from 2:1 to 16:9, you can try following CSS >>

body .stm_lms_courses__single--image img{padding-bottom: 12.15%;}

Please watch >> https://www.loom.com/share/5a1fed46a88c4e00831f60166cb70702

Best,

Lisa

Hi Lisa,

yeah, that’s abolutely perfect and that what I needed. ?? Thank you very much for your professional help. ??

Hello!

You’re always welcome! If you’re satisfied with Masterstudy LMS and our support, we kindly ask you to share your experience by posting a review on www.remarpro.com.

Your kind words will greatly encourage our team and motivate us to continue improving our products and services.

If you believe we deserve five stars, please click this link to open the review page: Review Masterstudy LMS.

Thank you!