Layout of specific pages broken

Hi Misa,

Can't see how GP Premium would cause an issue like this.

Can you deactivate each module to see if you can identify the problematic one?
https://docs.generatepress.com/article/installing-gp-premium/

Are you using a child theme?

Hi Leo,

I tried deactivating all the modules and it is the Elements module causing problems. Then I investigated further and found out that a block element hooked in a right sidebar is causing the problem. It is only problem when I put some Learndash block in the block element. And it doesn't matter if it is on course page or a page without any Learndash stuff on it. Also only a problem when not logged in. As logged in administrator the page with the sidebar looks exactly as it should.

Some Learndash blocks don't work with page builders, but should work with Gutenberg, which I'm using (+ GPP + GB). There is a second option to use a Learndash shortcode instead of Learndash block. When I use a shortcode in the block element hooked in a right sidebar, it works ok for both logged in and logged out users, but the design is a little off in both cases.

Yes, I'm using a child theme, but haven't put anything custom in the functions.php file yet, it's just in case. I downloaded the child theme that customer support offered here in the forum.

So, any suggestions? Or is it just "don't use elements with Learndash stuff" :)

Thank you.

Misa

Hi there,

is the site currently using the Shortcode ? As it looks ok to me.
If it is can you switch back to the blocks so i can see the issue.

let me know.

Hi David,

I switched back to using the block, the problem should be visible now.

Misa

Wow - that is properly broken - i wasn't expecting that! It missing entire template parts.
I can only assume that LD is doing something when it looks for its blocks on a page, and whatever that is doesn't work if the block is outside of the_content() - might be worth passing this onto learndash. If not it looks like good old shortcodes are the way to go for now ( urgh )

Yeah, well I didn't expect it either, because when logged in I can see everything in order...so I'm building the site and suddenly I find out that it's not working for logged out users.

I don't mind using a shortcode, but if I use the right sidebar, the design of the output is a little off.

Can you please take a look and compare? The first URL has the right sidebar using elements and the LD shortcode in it and the second URL (scroll to the bottom) has LD block and under it LD shortcode. And the right sidebar looks a little different (button and price tag). I don't know why because it's the same shortcode...I thought maybe there's difference between the LD block and LD shortcode, but the shortcode works on the homepage just fine, but not in the sidebar using elements.

Thank you.

Misa

So the issues with the first link is that page is not loading the LearnDash Course Grid CSS styles.
I assume again this LD loading CSS when blocks exist in the content. You could copy that CSS over to your child theme - i pasted it below.

But it may be worth checking with the plugin authors - they may have PHP Filter that will load assets outside of the_content.

#ld_categorydropdown {
    margin-bottom:20px
}

.ld-course-list-items {
    clear:both
}

.ld-course-list-items .ld_course_grid {
    margin-bottom:20px
}

.ld-course-list-items .ld_course_grid .thumbnail.course {
    line-height: 1.428571429;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto;
    display: block;
    position: relative;
    padding: 0;
    margin:0
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
    background: #5cb85c;
    box-shadow: 0 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 1px rgba(0, 0, 0, .2);
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, .3);
    position: absolute;
    font-size: 14px;
    left: -8px;
    top: 10px;
    padding: 3px 10px;
    z-index: 2;
    font-weight:700
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled {
    background:#428bca
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price:before {
    border: 4px solid transparent;
    border-top: 4px solid #348c34;
    border-right: 4px solid #348c34;
    content: "";
    position: absolute;
    left: 0;
    bottom:-8px
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled:before {
    border-top: 4px solid #357ebd;
    border-right:4px solid #357ebd
}

.ld-course-list-items .ld_course_grid .entry-title {
    margin:0 !important
}

.ld-course-list-items .ld_course_grid .entry-content {
    margin-bottom: 10px;
    padding:0
}

.ld-course-list-items .ld_course_grid .ld_course_grid_button {
    margin: 5px 0 !important;
    width:100%
}

.ld-course-list-items .ld_course_grid .ld_course_grid_button a {
    text-decoration: none !important;
    width:100%
}

.ld-course-list-items .ld_course_grid .thumbnail.course a.btn-primary {
    color:#fff
}

.ld-course-list-items .ld_course_grid .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.428571429;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select:none
}

.ld-course-list-items .ld_course_grid .btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset:-2px
}

.ld-course-list-items .ld_course_grid .btn:hover, .ld-course-list-items .ld_course_grid .btn:focus {
    color: #333;
    text-decoration:none
}

.ld-course-list-items .ld_course_grid .btn:active, .ld-course-list-items .ld_course_grid .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125)
}

.ld-course-list-items .ld_course_grid .btn.disabled, .ld-course-list-items .ld_course_grid .btn[disabled], .ld-course-list-items .ld_course_grid fieldset[disabled] .btn {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow:none
}

.ld-course-list-items .ld_course_grid .btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color:#357ebd
}

.ld-course-list-items .ld_course_grid .btn-primary:hover, .ld-course-list-items .ld_course_grid .btn-primary:focus, .ld-course-list-items .ld_course_grid .btn-primary:active, .ld-course-list-items .ld_course_grid .btn-primary.active, .ld-course-list-items .ld_course_grid .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #3276b1;
    border-color:#285e8e
}

.ld-course-list-items .ld_course_grid .btn-primary:active, .ld-course-list-items .ld_course_grid .btn-primary.active, .ld-course-list-items .ld_course_grid .open .dropdown-toggle.btn-primary {
    background-image:none
}

.ld-course-list-items .ld_course_grid .btn-primary.disabled, .ld-course-list-items .ld_course_grid .btn-primary[disabled], .ld-course-list-items .ld_course_grid fieldset[disabled] .btn-primary, .ld-course-list-items .ld_course_grid .btn-primary.disabled:hover, .ld-course-list-items .ld_course_grid .btn-primary[disabled]:hover, .ld-course-list-items .ld_course_grid fieldset[disabled] .btn-primary:hover, .ld-course-list-items .ld_course_grid .btn-primary.disabled:focus, .ld-course-list-items .ld_course_grid .btn-primary[disabled]:focus, .ld-course-list-items .ld_course_grid fieldset[disabled] .btn-primary:focus, .ld-course-list-items .ld_course_grid .btn-primary.disabled:active, .ld-course-list-items .ld_course_grid .btn-primary[disabled]:active, .ld-course-list-items .ld_course_grid fieldset[disabled] .btn-primary:active, .ld-course-list-items .ld_course_grid .btn-primary.disabled.active, .ld-course-list-items .ld_course_grid .btn-primary[disabled].active, .ld-course-list-items .ld_course_grid fieldset[disabled] .btn-primary.active {
    background-color: #428bca;
    border-color:#357ebd
}

.ld-course-list-items .ld_course_grid .btn-primary {
    color: #fff;
    text-decoration:none
}

.ld-course-list-items .ld_course_grid .btn-primary:hover {
    color:#fff
}

.ld-course-list-items .ld_course_grid .ld_course_grid_video_embed {
    background-color: #f5f5f5;
    padding: 1px;
    width:100%
}

.ld-course-list-items .ld_course_grid .ld_course_grid_video_embed > * {
    width: 100%;
    margin-bottom:0
}

.ld-course-list-items .ld_course_grid .thumbnail.course img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow:none
}

.ld-course-list-items .ld-course-list-items .ld_course_grid a.thumbnail:hover, .ld-course-list-items .ld_course_grid a.thumbnail:focus {
    border-color:#428bca
}

.ld-course-list-items .ld_course_grid .thumbnail a, .ld-course-list-items .ld_course_grid .thumbnail a:hover {
    box-shadow:none
}

.ld-course-list-items .ld_course_grid .thumbnail .caption {
    padding: 9px;
    color:#333
}

.ld-course-list-items .ld_course_grid .thumbnail .caption a {
    text-decoration:none !important
}

.ld-course-list-items .ld_course_grid .thumbnail .caption p {
    float: none !important;
    margin: 15px 0 0 !important;
    width:100% !important
}

.ld-course-list-items .ld_course_grid dd.course_progress {
    width:100%
}

.ld-course-list-items .ld_course_grid .ld-progress-steps {
    display: none
}

Thank you very much. That CSS works. I will also check with LD what you suggested.

You're welcome