[Support request] sidebar element + grid and break point problem

[Michael]

Hi lovely peoples,

I had an issue with the break point of the sidebar element on tablet, which smooshed any grids beside it at that resolution (despite them being set at 100% on the backend)

I found a CSS fix in the support forum which seemed to fix things, but a few issues remain.

1. The sidebar is down on the bottom of the tablet screen at its original width. I could hide it on tablet/mobile using GB controls, but it would be nice to keep it as a little dashboard- even better at the top of the screen instead of the bottom.. Is there a way to change the width of this guy automatically, or am I better off just creating a new block element for mobile widths and hook it to the preferred location and hide it on desktop?

2. bonus question- if you could help with this it would be awesome. There doesn’t appear to be any front end control for LearnDash course grid break points or archive card widths. The grid on tablet looks terrible. Is there a quick and easy CSS fix for this? I’d really appreciate it, but understand if this is a LD issue you’d prefer not to deal with.

IMAGES OF CONDITIONS: https://www.dropbox.com/s/qafhk18iggh642f/sidebar%20and%20ld%20grid.png?dl=0
link to page in question: https://staging27.construction-english.com/classroom/

Cheers!

Michael

[David]

Hi there,

i see you have some CSS already,

1. there is an issue – see here i have marked where there is a missing closing } bracket.:

@media (min-width: 768px) {
    .page-id-144 #content .content-area {
        width: 55%;
    }

    #right-sidebar {
        width: 45%
        !important
    }
         <---- there is a missing closing } here ?
    @media (min-width: 1024px) {
        .page-id-144 #content .content-area {
            width: 75%;
        }

2. In that CSS this rule is setting the sidebar to 45% at 768px.:

 #right-sidebar {
    width: 45% !important
}

That needs to be 100%.

Fix that and then we can look at the grid.

[Michael]

Hey David!

thanks again for the help. That fixed the sidebar issue. Curious though.. I thought the CSS was specific to .page-id-144, but it seemed to affect the site globally?

Any ideas about the LD grid would be awesome, but don’t spend too much time on it.

Always appreciate the help- good stuff!

Michael

[David]

The sidebar rule ie.

#right-sidebar {
    width: 45% !important
}

Doesn’t include the ID so it gets applied everywhere.
And as the grid is built using flexbox the content-area and the #right-sidebar will flex to accomodate the sidebars size changes.

If you want to only apply the sidebar width change to that page, then change the CSS to:

.page-id-144 #right-sidebar {
    width: 45% !important
}

#2 – where can i see the LD grid? Do i need a login?

[Michael]

Hey David

Awesome- thanks! I thought the page id covered everything inside the outer curly brackets, but apparently you need to include the descriptor before everything? Anyhoo- I’m planning on taking a CSS course, so hopefully I’ll bother you less frequently with such questions. 🙂

As for the course grid, I’d like 1 column on mobile, 2 columns on tablets, and 3 on 1024px + resolutions.. maybe even 4 at 1920px if possible. I can ALMOST live with what is already there, but it looks funky on tablet. If you sorted out a CSS example, I could copy/modify for the different max/min resolutions.

The existing LD CSS for the grid is a bit complex. Here’s a link to a page with a grid:

https://staging27.construction-english.com/academy/academy-dd/

And here’s a copy of the CSS

@media (min-width: 576px)
.ld-course-list-content .ld_course_grid.col-sm-8, #ld_course_list .ld_course_grid.col-sm-8, #et-boc .ld_course_grid.col-sm-8 {
flex: 0 0 100%;
max-width: 100%;
margin-right: 4%;
margin-bottom: 4%;

Any insights would be awesome! Thanks

Michael

[Fernando]

Hi Michael,

Yes, you need to include it as a CSS selector as well. Glad you’re intending to learn CSS!

To fix the Grids through code, can you try adding this through Appearance > Customize > Additional CSS:

.page-id-6983 .ld-course-list-items.row .ld_course_grid {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
}

.page-id-6983 .ld-course-list-items.row {
    gap: 10px;
}

@media (max-width: 768px) {
    .page-id-6983 .ld-course-list-items.row .ld_course_grid {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .page-id-6983 .ld-course-list-items.row .ld_course_grid {
        width: 50%;
        flex: 50%;
    }
}

@media (min-width: 1025px) {
    .page-id-6983 .ld-course-list-items.row .ld_course_grid {
        width: 33%;
        flex: 33%; 
        flex-grow: 0;
    }
}

I added the 3 common views. You may alter the media query values if you have different break points.

[Michael]

Hey Fernando!

I gave the CSS you pasted a crack, but for some reason it displays at 33% for the 1025 min, but only 2 columns. (i.e. the card width is correct, but there’s one missing in each row. I suspect there’s some weird LD parameter in the row class that might be clashing with our CSS.

If an easy fix that quickly comes to mind, please share… but don’t worry about it if you see it taking a lot of your time.

Thanks again!

Michael

[Fernando]

Can you share a link where there are three courses so we can view the issue first-hand and assess the situation?

Currently, the link you shared only has two.

[Michael]

Hi there here you go-

https://staging27.construction-english.com/academy/academy-pp/

Currently without our new CSS

[David]

That latest page – i only see a GenerateBlocks Grid containing 3 columns – i don’t see a course grid ?

[Author]

Posts