custom.css error - how to validate this file and find error

[Qubabos]

Hello there, 

I'm using one of ipcfocus.com theme, in IPS 4.2 many thing has to go into custom.css. My issue is that my /* Guests terms bar */ code has to be placed before "@media screen" code - instead it doesnt work. How to find where is my mistake ? What I was doing not correctly ? I suspect that I missed one } after "@media screen and (min-width:768px){" but when I put this just after this code my "/* Larger avatars: Both values should be the same */" code stops working.

/* Place your custom css code in this file */

.ipsfocus_bg2 .header-background-wrap,
.ipsfocus_bg2 .nav-bar-image,
.ipsfocus_bg2 .ipsType_sectionTitle{
	background-size: auto;
}

.ipsfocus_bg3 .header-background-wrap,
.ipsfocus_bg3 .nav-bar-image,
.ipsfocus_bg3 .ipsType_sectionTitle{
	background-size: auto;
}

/* Guests terms bar */
#elGuestTerms{
  background: #2E4861;
  color: #FFFFFF;
  opacity: 0.7 !important;
}
/* Guests terms button */
#elGuestTerms .ipsButton{
  background: #5A7C94;
  color: #FFFFFF;
  opacity: 0.9 !important;
}

@media screen and (min-width:768px){
  
/* Article fonts size */ 
.ipsType_richText.ipsType_normal{
  font-size: 1.4rem;
}
  
/* Remove background from profile user names */
.ipsPageHead_barText, .ipsPageHead_barText_small{ background: none; }
  
  /* Larger avatars: Both values should be the same */
	.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after{
		width: 90px;
		height: 90px;
	}

}

/* hide the header social icons */
.ipsfocus-breadcrumb .ipsfocus_social{ display: none; }

/* centered logo on mobile view */
@media screen and (max-width: 979px){
	.logo{
		display: flex;
		justify-content: center;
	}
}

/* Ikony głównego menu */
#elNavSecondary_3 a:before{ content: "\f0e6" }
#elNavSecondary_4 a:before{ content: "\f03e" }
#elNavSecondary_6 a:before{ content: "\f1ea" }
#elNavSecondary_19 a:before{ content: "\f05b" }

/*Tłumaczenie PL dla stylu*/
html[lang="pl-PL"] .focus-picker{
	content: "Wybierz kolor";
}

html[lang="pl-PL"] .focus-guestMessage{
	content: "Witamy w ";
}

html[lang="pl-PL"] .ipsCommentUnreadSeperator:before{
	content: "Nowa zawartość zaczyna się tutaj";
}

html[lang="pl-PL"] .cForumList .ipsDataItem_unread .ipsDataItem_title:before, .cForumGrid_unread .ipsPhotoPanel{
	content: "NOWE";
}

/* Whos Online widget font size */
.ipsWidget .ipsType_medium{ font-size: 0.9em; }

/* embed headers box and text colors */
.ipsRichEmbed_header{
  background: #F3F5F6;
  color: #606A72;
}

/* quote headers box and text colors */
.ipsQuote,
.ipsCode,
.ipsSpoiler, .ipsStyle_spoiler{
	background: #F3F5F6;
	border-color: #FDFDFD !important;
	color: #828282;
}

.ipsQuote_citation,
.ipsSpoiler_header,
.ipsEmbedded_headerArea{
	background: #F3F5F6;
	color: #828282;
}

/* Szablony moderacyjne */
/* Domyślne ustawienia */
.webMessage {
    border-radius: 2px;
    color: #fff;
   	margin: 10px auto;
  	text-align: center;
    padding: 15px;
  	width: 35%;
}
/* Problem został rozwiązany */
.webMessage_success {
    background-color: #42afe3;
}
.webMessage_success:before {
	 content: "\f00c";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}
/* Temat został zamknięty */
.webMessage_closed {
    background-color: #ed6c63;
}
.webMessage_closed:before {
	 content: "\f023";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}
/* Temat został przeniesiony */
.webMessage_move {
    background-color: #97cd76;
}
.webMessage_move:before {
	 content: "\f0ec";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}

/* Main forum icons */
.cForumRow [data-forumID="35"] .ipsItemStatus > .fa:before {
    content: '\f0a0';
}
.cForumRow [data-forumID="36"] .ipsItemStatus > .fa:before {
    content: '\f0a0';
}
.cForumRow [data-forumID="34"] .ipsItemStatus > .fa:before {
    content: '\f0a0';
}
.cForumRow [data-forumID="83"] .ipsItemStatus > .fa:before {
    content: '\f0a0';
}
.cForumRow [data-forumID="23"] .ipsItemStatus > .fa:before {
    content: '\f108';
}
.cForumRow [data-forumID="43"] .ipsItemStatus > .fa:before {
    content: '\f17a';
}
.cForumRow [data-forumID="93"] .ipsItemStatus > .fa:before {
    content: '\f1ea';
}
.cForumRow [data-forumID="3"] .ipsItemStatus > .fa:before {
    content: '\f27b';
}
.cForumRow [data-forumID="6"] .ipsItemStatus > .fa:before {
    content: '\f2a7';
}
.cForumRow [data-forumID="2"] .ipsItemStatus > .fa:before {
    content: '\f0a4';
}
.cForumRow [data-forumID="7"] .ipsItemStatus > .fa:before {
    content: '\f014';
}
.cForumRow [data-forumID="8"] .ipsItemStatus > .fa:before {
    content: '\f023';
}
.cForumRow [data-forumID="77"] .ipsItemStatus > .fa:before {
    content: '\f1e6';
}
.cForumRow [data-forumID="87"] .ipsItemStatus > .fa:before {
    content: '\f20e';
}
.cForumRow [data-forumID="60"] .ipsItemStatus > .fa:before {
    content: '\f21b';
}
.cForumRow [data-forumID="51"] .ipsItemStatus > .fa:before {
    content: '\f085';
}
.cForumRow [data-forumID="11"] .ipsItemStatus > .fa:before {
    content: '\f1eb';
}

/* Subforum columns - start */
/* @media screen and (min-width: 980px){ - this tag is for mobile view */
	
	.ipsDataItem_subList{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	
		.ipsDataItem_subList li{
			width: calc((99% / 3) - 5px);
			line-height: 26px;
			flex: 0 0 auto;
			position: relative;
		}
  
			.ipsDataItem_subList li:before{
				content: '\f18e';
				font-family: 'FontAwesome';
				font-size: 14px;
				display: inline-block;
				transform: translate(0,0);
				font-weight: normal;
			}
			
			.ipsDataItem_subList a{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				position: absolute;
				top: 0; bottom: 0;
				left: 15px; right: 0;
			}
			
			html[dir='rtl'] .ipsDataItem_subList a{
				left: 0;
				right: 15px;
			}
			
			.ipsDataItem_subList .ipsDataItem_unread a{
				left: 12px;
			}
			
			html[dir='rtl'] .ipsDataItem_subList .ipsDataItem_unread a{
				left: 0;
				right: 12px;
			}
			
			.ipsDataItem_subList:before,
			.ipsDataItem_subList li a::after{
				display: none;
			}
		
}
/* Subforum columns - end */

anyone ?

[Netherlord]

line 250 parse error!

[Qubabos]

2 minutes ago, Netherlord said:

line 250 parse error!

you mean that empty line ? or too much } at the end ?

here (those xxxx marked line) ? 

.ipsDataItem_subList:before,
			.ipsDataItem_subList li a::after{
				display: none;
			}
		xxxxxx
}
/* Subforum columns - end */

 

[Netherlord]

51 minutes ago, Qubabos said:

/* @media screen and (min-width: 980px){ - this tag is for mobile view */

this is commented out..... so it won't work. it should be!

Quote

/* - this tag is for mobile view */

@media screen and (min-width: 980px){

Standard is

/* whatever is here will be disabled and not work, to be used for notes. Putting css inside these will break things unless you just want to save code in them for later use */

[Qubabos]

thank you @Netherlord what about

@media screen and (min-width:768px){

it should be ended with } just below this code ?

[Meddysong]

No. The closing } comes at the bottom after all the CSS classes that the media query applies to. You have it correct already.

@media screen and (min-width:768px){
	.your-class-here {
		color: red;
	}
	.another-class {
		color: blue;
	}
} <!-- this tag here closes the media query

 

[Qubabos]

Thank you guys