Responsive Layout

Hey Akhilz,

thanks for reporting this, I managed to reproduce it on Twenty Twelve theme and we will fix it in one of our future releases.

Until then adding this to your css should temporarily fix the problem:

.llms-course-list {
    box-sizing: border-box;
}

hi psmolic

thanks for the response. the css does seem to centralize the boxes on big screen (iMac) but on mobile phone it is still the same issue.

its neither centralized nor do i see the full image. have to shrink the screen to see whole box and that shrinks everything else around it too including the header image etc.

also if there are different sized images for different courses, the boxes are not uniform, they are of different sizes too, which looks a bit odd.

example here

any other possibility of workaround till the future release?

Hey akhilz,

I’m not sure what you mean by “its neither centralized nor do i see the full image. have to shrink the screen to see the whole box and that shrinks everything else around it too including the header image etc.”

On mobile and desktop at various sizes your site appears quite functional and responsive.

As far as the height of the columns I don’t see this being something LifterLMS will “fix” in a future release. This is something that, if we implemented, would make theme compatibility even harder than it currently is so our recommendation would be to write CSS or Javascript into your theme or child theme that would automatically handle the element height for you or (better) would be to use uniform image sizes and approximately uniform course titles so that the boxes all match height.

Please let me know if there’s something really obvious I’m missing here as we do want to help resolve your issue but it’s looking pretty good to me at this moment.

Perhaps we’re dealing with a browser / operating system specific issue. Browser & OS specs will help us reproduce and then resolve.

Take care,

hi thomasplevy

have so far tried on Samsung phones running android 4.1 using Firefox browser updated to the latest version from PlayStore.

please have a look at these:

Blog Page with image auto resized to fit in the center of the screen. Screenshot 1

Courses Page with image NOT auto resized Screenshot 2

Courses Page shrunk by pinching on the phone screen Screenshot 3

see

1. how everything shrinks to accommodate the Course image.

2. see the extra space on the left of the course image viz a viz equal space on both sides of the image on screenshot 1.

i hope the screenshots above give a clear understanding of the issue.

Hey akhilz,

Thanks for the additional info, try this:

.llms-course-list {
    box-sizing: border-box;
}

@media screen and (max-width: 641px)
.llms-course-list .courses li {
    width: auto;
    display: block;
}

This can go in a custom CSS file but we’ll be including this as a patch in our next release.

Please let us know if you need any additional assistance,

code added to the custom styles but didn’t change anything thomsaplevy.

@media screen is showing in blue color in code suggesting it may be incomplete or not correct perhaps.

please help.

Sorry akhilz,

I rushed through the solution and did in fact provide incomplete code.

Try this:

.llms-course-list {
    box-sizing: border-box;
}

@media screen and (max-width: 641px) {
  .llms-course-list .courses li {
    width: auto;
    display: block;
  }
}

thank you so much thomasplevy.

this piece of code (that you shared) was very helpful. looks good on phone now.

thanks again.

you’re welcome!