New to the community? Start here

Remove sidebar from CoursePress courses list

Hi there,

I recently removed some widgets I had on the sidebar but the blank space continues there.

How can I make the page https://courses.nativeportuguese.co/courses/ either centered or put more width?

thanks guys!

Philipe

Alex Stine
- System Administrator: Earn your WPMU DEV membership
- 1,174 pts: Hero points 5,050 pts: Rep. points LEVEL 23
Hello Philipe
Hope you are well today!

Could you please try the following CSS code?
```
.post-type-archive-course #secondary.widget-area {
display: none;
}
.post-type-archive-course .site-content {
width: 100%;
}
```
You can add this code in a Child Theme style.css file or you can use a custom CSS plugin.

Hope this helps!

Cheers,
Alex :smiley:
Philipe
- The Incredible Code Injector: Earn your WPMU DEV membership
- 86 pts: Hero points 275 pts: Rep. points LEVEL 5
Hey Alex, thanks for your answer, I put the code on the Custom CSS but got different results than I expected, take a look.

any other css code?

James Morris

WordPress Enthusiast: Earn your WPMU DEV membership

1,361 pts: Hero points 7,066 pts: Rep. points LEVEL 25

Hello Philipe,

I hope you are well today.

If you add the following to your Child Theme's Custom CSS it should give you the look you're after.

.content-side-area {
    width: 100%;
    float: none;
}
.post-type-archive-course article.type-course {
    background-color: #f3f3f3;
    width: 100%;
    float: none;
    height: 225px;
    text-overflow: ellipsis;
    position: relative;
}
.post-type-archive-course section.article-content-right {
    float: left;
    margin-left: 30px;
    width: 660px;
    margin-top: 15px;
}
.post-type-archive-course .quick-course-info {
    position: absolute;
    bottom: 0;
    width: 660px;
    height: 45px;
    border-top: 1px solid #e6e6e3;
    float: right;
}

Here's a screenshot of what it should look like: https://monosnap.com/file/K4iabxvh5R1UwZZtoQCSlMDri5CSIs

Let us know if you have any further questions. We'll be happy to help! :slight_smile:

Best regards,

James Morris

Philipe
- The Incredible Code Injector: Earn your WPMU DEV membership
- 86 pts: Hero points 275 pts: Rep. points LEVEL 5
Hey James,

thanks for your support, changes were made successfully on the page I needed, although it changed other page as well ( https://courses.nativeportuguese.co/ )

I only need to change https://courses.nativeportuguese.co/courses/ (which is ok now)
any CSS code to apply this only to a specific page?

thanks
James Morris
- WordPress Enthusiast: Earn your WPMU DEV membership
- 1,361 pts: Hero points 7,066 pts: Rep. points LEVEL 25
Hello Philipe,

Unfortunately, your theme does not give your body tag a unique identifier for the page you are on. However, it does give some classes. Just doing a quick look at the source code, I would think that either .course-vocabulario-em-geral or .post-type-archive-course would be the class you would need to add. For example:
```
.post-type-archive-course .content-side-area {
    width: 100%;
    float: none;
}
```
It seems as though only the first CSS declaration I gave you was lacking the post-type-archive-course class. This may be what's causing your problem.

Please let us know if this resolves the problem for you.

Best regards,

James Morris
Philipe
- The Incredible Code Injector: Earn your WPMU DEV membership
- 86 pts: Hero points 275 pts: Rep. points LEVEL 5
something weird, just noticed that on mobile version the thumbnails doesn't appear. ( https://courses.nativeportuguese.co/courses/ )

James Morris

WordPress Enthusiast: Earn your WPMU DEV membership

1,361 pts: Hero points 7,066 pts: Rep. points LEVEL 25

Hello Philipe,

Ah! My mistake. I should have had you qualify the CSS for desktop screens only. This way your original styles will take over on mobile.

Try changing the CSS to this:

@media screen and (min-width: 960px) {
	.post-type-archive-course .content-side-area {
		width: 100%;
		float: none;
	}
	.post-type-archive-course article.type-course {
		background-color: #f3f3f3;
		width: 100%;
		float: none;
		height: 225px;
		text-overflow: ellipsis;
		position: relative;
	}
	.post-type-archive-course section.article-content-right {
		float: left;
		margin-left: 30px;
		width: 660px;
		margin-top: 15px;
	}
	.post-type-archive-course .quick-course-info {
		position: absolute;
		bottom: 0;
		width: 660px;
		height: 45px;
		border-top: 1px solid #e6e6e3;
		float: right;
	}
}

Best regards,

James Morris

Philipe
- The Incredible Code Injector: Earn your WPMU DEV membership
- 86 pts: Hero points 275 pts: Rep. points LEVEL 5
hey James, thanks for your help! it worked! =D