P1 - Broken site since theme.co login

Support
#1

Hi all,

Raising this as a P1 issue as i haven’t touched any content on the site.

Since one of my previous topics Lely had to add a gap to a column because of some bug. Since then this has happened on all of my pages. I’m not saying it’s because of that but it’s been since then that everything has gone like the below…

The layout has completely gone, any coloured backgrounds, any text colour, most images also.

This needs investigating straight away, since i’ve moved to Pro from X i’ve had nothing but problems on the site. I wish i had just stayed with X as i don’t know what is going on with the latest release but as you can see everything is now broken, after no human interaction.

#2

However within the Pro editor the site looks fine

Can I escalate this to somebody as i’ve just had problem after problem since moving to Pro. Have added my login details below

#3

Hello Ryan,

You are experiencing the issue because you have added this custom css code in your header.

@media all and (max-width: 979px) {
  
  .x-masthead .x-mod-container {
    position: absolute;
    width: 100%;
    
}

.x-masthead .x-mod-container .x-anchor {
    margin-left: auto;
}

.x-masthead  .x-menu.x-menu-dropdown {
    width: 100%;
  	
}
  
  .x-bar {
    
    background-color:rgba(1,1,1,0.5) !important;
  }
  
}

@media all and (max-width: 425px) {
  
  .x-bar .x-image {
    
    max-width: 200px !important;
  }
  
  @media all and (max-width: 325px) {
  
  .x-bar .x-image {
    
    max-width: 140px !important;
  }

The correct code should be this:

@media all and (max-width: 979px) {
	.x-masthead .x-mod-container {
		position: absolute;
		width: 100%;
	}

	.x-masthead .x-mod-container .x-anchor {
		margin-left: auto;
	}

	.x-masthead  .x-menu.x-menu-dropdown {
		width: 100%;
	}
	  
	.x-bar {
		background-color:rgba(1,1,1,0.5) !important;
	}
  
}

@media all and (max-width: 425px) { 
  .x-bar .x-image {
    max-width: 200px !important;
  }
}

@media all and (max-width: 325px) {  
  .x-bar .x-image {
    max-width: 140px !important;
  }
}

Please always keep in mind that you will have to indent your custom code to easily spot any missing closing curly braces.

I went ahead and corrected the issue already. Please check your site now.

#4

Hi RueNel,

Thank you for the reply, I didn’t realise a missing } on a media enquiry would break the whole site which is why I was panicking a bit. I didn’t even notice the missing }.

However, why did the Pro editor not show this problem? If it’s showing as correct within the editor I’m going to assume it’s working outside of it

Thank you very much!

#5

Hello Ryan,

Any broken css will not yet be implemented within the editor. As soon as you save it and view the front, the broken custom css will be loaded together with the custom css of the header, content and the footer. This is why after the broken css, the rest of the custom css or even the default settings for the content and footer were no longer applied to the page. It has affected the rest of the code.

Hope this explains it briefly.

#6

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