Some problems with CSS…

[Paolo]

In “The Events Calendar” plugin’s settings, I can choose different page templates for my calendar view: ‘Default event template’, ‘Default page template’ and ‘Full-width(no sidebar)’… but with the last choice the calendar doesn’t appear in full width, as you can see HERE.
The ‘Full-width(no sidebar)’ is the page template of my theme “Sparkling” and I attach the code here:

<?php
/**
 * Template Name: Full-width(no sidebar)
 *
 * This is the template that displays full width page without sidebar
 *
 * @package sparkling
 */

get_header(); ?>
<div id="content" class="site-content">
	<div id="primary" class="content-area col-sm-12 col-md-12">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php
					// If comments are open or we have at least one comment, load up the comment template
					if ( comments_open() || '0' != get_comments_number() ) :
						comments_template();
					endif;
				?>

			<?php endwhile; // end of the loop. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Also, in “The Events Calendar” sidebar widget, the left gray border is missing, as you can see HERE.

I hope you can help me. Thanks.
Paolo

[Josh]

Hey Paolo,

Thanks for reaching out to us!

I took a look at your site and it noticed the full-width issue that you mention. I took a look at the markup and noticed that the “col-md-8” class is being added to the main column that contains the calendar. It also looks like there is additional content added that I don’t see in the snippet provided above. Do you potentially have another full-width page template or a child theme with this template overwritten?

I also noticed the border issue on the widget. You can fix this by adding the following to your theme’s stylesheet:

body .tribe-mini-calendar {
margin-left: 0;
}

Let me know if this helps.

Thanks!

[Paolo]

Hey Josh,
thanks a lot for your help!
The border issue is now solved, but I’m still trying to find the problem with the full width view, following your advice. Yes, there was the Sparkling child theme; I have deleted it, but without results (there was only the basic code to begin tests). Also, I use some additional plugins and I’m trying to understand if there is something wrong with…

I’ll let you know news, as soon as possible.

[Paolo]

Ok Josh, here I am!
First step: the problem doesn’t depend by plugins.
Second step: I’ve tried with Chrome browser Code inspector and I’ve found the “col-md-8” class.
In the root directory of Sparkling Theme, this class is contained in: test/wp-content/themes/sparkling/inc/css/ .
But I have noticed that there it’s present in two files: “bootstrap.css” and “bootstrap.min.css“. In these ones the class is:

.col-md-8 {
	width: 66.66666667%;
}

I’ve tried to set it at 100% in “bootstrap.min.css” and the calendar it’s ok, but the Home Page appears distraught.
In “bootstrap.css” nothing has changed.
Sorry, but with all my goodwill I wouldn’t know how to proceed. Do you have a suggestion?

[Josh]

Hey Paolo,

Thanks for following up with us!

Definitely a strange issue. It looks like the page is using the appropriate template based on the modified body class, however the main content class is being generated with the “col-md-8” added.

The simplest workaround that I can offer would be to add the following to your theme’s stylesheet:

.tribe-theme-sparkling .col-md-8 {
width: 100%;
}

Not the greatest of solutions but it is reliable.

Let me know if this helps.

Thanks!

[Paolo]

Hi Josh,
I’ve added your CSS code in the root test/wp-content/themes/sparkling/tribe-events/tribe-events.css and it’s all right! Thanks a lot.
Thank you again for your support!

[Josh]

Hey Paolo,

No problem! Happy to help.

I’ll go ahead and close this ticket for now. If you have any further questions, please don’t hesitate to open a new one.

Thanks!

[Author]

Posts