Archive Pages For Modern Event Calendar Are Full Width - Want Them Boxed

Support
#1

I am having a challenge formatting my archive pages on MEC.

http://rrpcumc.wpengine.com/mec-category/student/

I want these to be in a container like standard pages on the site but the default seems to be no container.

I know how to fix this on a standard page, but because these are archive pages I am not sure what to do.

Thoughts?

#2

Hi,

To make it boxed, you can add this in X > Launch > Options > CSS

.archive.tax-mec_category #main-content {
   max-width: 1200px;
    margin: 0 auto;
}

Hope that helps.

#3

Hi Paul,

I have the same problem see http://deambachtsschool.org/activiteiten/

I tried your solution but it does not work… I also used a max-width of 900 px but I see no difference. Do you have a solution?

Regards, Marjolijn

#4

Hi @MarjolijnZegers,

Please try with this CSS:

.post-type-archive-mec-events section#main-content {
    max-width: 1000px;
    margin: 0 auto;
}
#5

Hi @thai,

Thanks for you answer. This works!! But:

1 Only in the editor not on the frontside.
2. now the backgroundimage in the footer is also boxed… To make this custom footer with this image I used the following css (Provided by a collegae of you: @Nabeel)

.#main-content:after {
content: ‘’;
background: url(http://deambachtsschool.org/wp-content/uploads/2017/10/mozaiek-1_footer-mz.png) no-repeat;
background-size: 100%;
background-position: bottom center;
padding-bottom: 0;
height: 75px;
width: 100%;
display: block;
}
.x-colophon.top {
background: #000;
color: #fff !important;
}
.x-colophon.top .h-widget {
color: #fff;
}

I don’t want the backgroundimage in the footer to be boxed… is there a solution?

3.Last question: how can I remove all the thin grey lines around the content?

Kind regards, Marjolijn

#6

Hi Marjolijn,

Please try to use browser developers tools to inspect element and see how CSS is applied. See this: https://screencast-o-matic.com/watch/cbX6n72I9H

.post-type-archive-mec-events section#main-content {
    max-width: 900px;
    margin: 0 auto;
}

But that CSS seems the same with the previous one. Reason that might stop that from working is either CSS syntax error or cache. I am in the process of checking when your site stop loading. I was able to login on admin but then it just stops loading and the error is this This site can’t be reached. Please check in with your hosting provider.

When I first check it on your source code before it stop loading I did not see that CSS on your site. See this:
. Did you remove the CSS?

For the next 2 issues, we can’t check at the moment because your site is down The screencast showing how to use browser dev tools will help you implement what you are trying to achieve though.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.