Page CSS completely missing on certain pages, plus other CSS errors after update

Hey guys, Pro auto-updated and I am getting a litany of errors across my website.

For starters, this page (https://hyperbitsmusic.com/songwriting-matrix/) seems to have lost all the on page CSS. Global is still there, but the page CSS is just completely blank.

Also, Vimeo players are completely missing from several pages like these:



Please advise! Thanks in advance for your help.

Hello @Hyperbits,

Thanks for writing in! I have inspected your page and it seems that you have inserted incorrect HTML code. For example, you have added this into the page:

<h5 style="margin-top:0;text-align:center">Section 1: Single Chords</h4>
<div class="bonus-item-block">
<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/09/15-songwriting-garrix.png" /></p>
<h6>Martin Garrix</h6>
</div>

Please edit your go over the custom HTML code that you have added and make sure that it is valid and correct. Ensure that every HTML tag is closed properly and with the correct closing tag.

Kindly let us know how it goes.

Hey @ruenel,

Not sure I understand how to edit that code, as this is part of a feature list. See screenshot. There is no HTML surrounding that section that you referenced,

Do you think this is related to the Vimeo issue that is occurring as well on multiple sites?

Screen Shot 2020-12-27 at 8.47.39 PM|690x368

Hello @Hyperbits,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Ok, I’ve gone ahead and added a secure note to my last reply. Please let me know if you need anything else in the meantime. Thanks!

Hi @Hyperbits,

I have gone through your site and seems that the issue mentioned by my colleague has been already fixed. There is nothing found as a CSS issue in the given URL, what else we found that there might be some broken HTML that affecting the structure and styles.
I would suggest you check by deleting the section one by one till the issue is fixed, and the last one you have deleted before the fix is the actual issue.

If that does not resolve your issue, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hey @tristup

The CSS is completely gone from the Songwriting Matrix page — like I can’t edit any of the CSS because it is not available. How can I fix this?

Also, all the Vimeo players on my site no longer have the ability to go full screen mode, and some are just completely missing. Can you help fix this?

Hello @Hyperbits,

You have added this in one of your text elements:

<p>We dive DEEP into the composition, sound design, and arrangement of 11 popular and current artists as we breakdown their signature sound. Consider these intensive roadmaps to achieving high-quality musical concepts & ideas.</p>

<div class="bonus-item-blocks-container">

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/1-songwriting-zach.png" /><h6>Introduction</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/2-songwriting-ariana.png" /><h6>Ariana Grande</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/3-songwriting-guetta.png" /><h6>David Guetta</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/4-songwriting-khalid.png" /><h6>Khalid</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/5-songwriting-lious.png" /><h6>Louis the Child</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/6-songwriting-postmalone.png" /><h6>Post Malone</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/7-songwriting-silk.png" /><h6>Silk City</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/8-songwriting-chainsmokers.png" /><h6>The Chainsmokers</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/9-songwriting-whethan.png" /><h6>Whethan</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/10-songwriting-cleanbandit.png" /><h6>Clean Bandit</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/11-songwriting-illenium.png" /><h6>Illenium</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/12-songwriting-kygo.png" /><h6>Kygo</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/09/13-songwriting-loudluxury.png" /><h6>Loud Luxury</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/09/14-songwriting-flume.png" /><h6>Flume</h6>
	</div>

	<div class="bonus-item-block">
		<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/09/15-songwriting-garrix.png" /><h6>Martin Garrix</h6>
	</div>

</div>

In your first accordion item, you also added this:

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 1:</span>Twelve Tone System <span class="time">7:32</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 2:</span>Intervals <span class="time">5:05</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 3:</span>Major & Minor Scales <span class="time">5:25</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 4:</span>Major & Minor Keys <span class="time">7:43</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 5:</span>Circle Of Fifths <span class="time">5:07</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 6:</span>Major & Minor Chords <span class="time">7:49</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 7:</span>7th Chords <span class="time">8:47</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 8:</span>Consonance & Dissonance <span class="time">5:58</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 9:</span>Major Pentatonic & Minor Blues Scales <span class="time">5:02</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 10:</span>Time Signatures & Meter <span class="time">5:42</span>
</div>

<div class="accordion-line-item">
	<img src="https://hyperbitsmusic.com/wp-content/uploads/2019/05/play-btn.png"/><span class="lesson">Lesson 11:</span>Note Lengths <span class="time">14:16</span>
</div>

I have checked the page’s custom CSS and it is completely blank. You may have removed it by accident. Perhaps, you can copy the custom page CSS from other page instead:

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

/* @media(min-width: 768px){ */
  .equalize-starttofinish .x-column {
    position: relative;
    margin-bottom: 20px;
  }

  .equalize-starttofinish .x-column .x-btn{
    position: absolute;
    bottom: 0;
	}
/* } */

.little-testimonials .quote {
  color: #000;
  margin-top: 15px;
}

.little-testimonials h5 {
  color: #000;
  margin: 15px auto;
}

.little-testimonials img {
  max-width: 100px;
  border-radius: 100%;
  box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
}


.demo-component {
/*   display: none; */
  margin-bottom: 20px;
}

.demo-btn-container {
  float: left;
  font-size: 15px;
  width: 30px;
  height: 25px;
  margin: 10px 0 0 0;
  cursor: pointer;
}

.demo-btn-container i {
  color: #1e2136;
}

#look-inside .x-accordion-heading .x-accordion-toggle {
  font-weight: 400;
  font-size: 20px;
}

#look-inside .x-accordion-inner {
  font-size: 1.1rem;
  line-height: 2.1rem;
  padding-left: 37px;
}

#look-inside .x-accordion-inner img {
  max-width: 15px;
  margin-top: -3px;
  margin-right: 5px;
}

#look-inside .accordion-line-item:not(:nth-last-child(1)) {
  display: block;
  border-bottom: 1px solid #e8e8e8;
}

#look-inside .accordion-line-item {
  position: relative;
	padding-right: 45px;
}


.accordion-title-pull-right {
 	float: right;
  opacity: .5;
}

#look-inside .accordion-line-item .lesson {
  display: inline;
  text-transform: uppercase;
  margin-right: 10px;
  font-weight: bold;
}
#look-inside .accordion-line-item .time {
  position: absolute;
  right: 5px;
  top: 1px;
  padding-left: 10px;
}

#look-inside .accordion-line-item .time {
  position: absolute;
  right: 5px;
  top: 1px;
  padding-left: 10px;
}

.preview-video-lightbox-btn a {
  border: 1px solid rgb(183,98,123);
  float: right;
  margin-right: 10px;
  padding: 5px 9px;
  margin-top: 5px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 14px;
}

.preview-video-lightbox-btn a:hover {
  background-color: rgb(183,98,123);
  color: #fff;
}

.center-hr {
  margin-left: auto !important;
	margin-right: auto !important;
}

.classic-icon-list li {
  padding-bottom: 10px !important;
  color: rgb(51,51,51);
  font-size: 1.3rem !important;
}

.x-btn.blue-btn {
  background-color: #3e84b6;
  border-color: #3e84b6;
}
.x-btn.blue-btn:hover {
  background-color: #296591;
  border-color: #296591;
}

Best Regards.

Hey Ruenel,

Thanks for the response. The reason I was writing in is because I didn’t delete the CSS, it just disappeared on its own. That said, I have been able to retrieve the CSS from our staging site, however, every time I try to save the page with the updated and correct CSS, I get an error: ‘Uh oh, page failed to save’

I actually can’t save the page regardless of whether I add that CSS back in or not. I tried clearing my browser cache, as well as clearing the X theme > settings > clear style cache.

I am also able to save other pages, so the problem seems to be unique to the Songwriting Matrix page. Is there a specific error in the page or code that is causing this?

Thanks in advance for your help!

Hi @Hyperbits,

It has been found that the page you mentioned is not saving the data, whereas when it cloned and opened using the builder it saved the modified data successfully.
It would be suggested to check by deleting the original version of the page and use the cloned version instead. Please let us know if that resolves the issue.

Please find the test URL in the secure note.
Thanks

Just an update, I was able to manually retrieve the CSS from a backup and paste it in, as well as duplicate the page and save a new version. So we can likely close this ticket.

Hello, @Hyperbits,

Glad that things are well for you. Please feel free to reach us if you have any query.

Have a great day!
Thanks

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