Sections Order

@tessavdbrink, you should not use the editor (i.e., Appearance → Editor to make changes, unless you’ve created a child theme. Any changes you make to theme files will be lost once you update the theme. Instead, I see that you have Jetpack installed, so you should be adding your CSS using Jetpack’s Custom CSS option (activate it by going to Jetpack → Settings, and then you should see a menu option under Appearance → Edit CSS).

It looks like you are running version 1.8.2.5 of the theme. You can replace the current contents of your style.css file with this, which is the official version of style.css. However, you will lose any other changes that you’ve made to the stylesheet. Probably best to start over anyway and use Jetpack’s custom CSS.

OK, so I went through your style.css file, and here:

/*---------------------------------------
 **   10.2 Asides                   -----
-----------------------------------------*/
}.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
 /*---------------------------------------
 **   10.3 Comments                   -----
-----------------------------------------*/

should be this:

/*---------------------------------------
 **   10.2 Asides                   -----
-----------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}
 /*---------------------------------------
 **   10.3 Comments                   -----
-----------------------------------------*/

That is, the closing right brace was in the wrong place.

@crouchingbruin thank you so much for your help!

Hi,

I’m having trouble too with the order of my sections using Simple Custom CSS. I use the flex box below and in most of my browsers it works fine. Only when I try to view my site in safari, it is totally messed up.

Do you know what’s wrong and how it can be fixed?

/* Flexbox container */
#content {
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Chrome */
display: flex; /* NEW, Spec – Opera 12.1, Firefox 20+ */ –
-webkit-box-orient: vertical;
-ms-flex-direction: column;
webkit-flex-direction: column;
flex-direction: column;
}
#focus {
-webkit-box-ordinal-group: 2; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD – Firefox 19- */
-ms-flex-order: 2; /* TWEENER – IE 10 */
-webkit-order: 2; /* NEW – Chrome */
order: 2; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#aboutus {
-webkit-box-ordinal-group: 4; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 4; /* OLD – Firefox 19- */
-ms-flex-order: 4; /* TWEENER – IE 10 */
-webkit-order: 4; /* NEW – Chrome */
order: 4; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#team {
-webkit-box-ordinal-group: 5; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 5; /* OLD – Firefox 19- */
-ms-flex-order: 5; /* TWEENER – IE 10 */
-webkit-order: 5; /* NEW – Chrome */
order: 5; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#latestnews {
-webkit-box-ordinal-group: 1; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD – Firefox 19- */
-ms-flex-order: 1; /* TWEENER – IE 10 */
-webkit-order: 1; /* NEW – Chrome */
order: 1; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#testimonial {
-webkit-box-ordinal-group: 3; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3; /* OLD – Firefox 19- */
-ms-flex-order: 3; /* TWEENER – IE 10 */
-webkit-order: 3; /* NEW – Chrome */
order: 3; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#contact {
-webkit-box-ordinal-group: 6; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 6; /* OLD – Firefox 19- */
-ms-flex-order: 6; /* TWEENER – IE 10 */
-webkit-order: 6; /* NEW – Chrome */
order: 6; /* NEW, Spec – Opera 12.1, Firefox 20+ */
}
#footer {
-webkit-box-ordinal-group: 7; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 7; /* OLD – Firefox 19- */
-ms-flex-order: 7; /* TWEENER – IE 10 */
-webkit-order: 7; /* NEW – Chrome */
order: 7; /* NEW, Spec – Opera 12.1, Firefox 20+ */

Ps. this is my site: https://www.grijsisookeenkleur.nl

@evaverwey, in the very first rule (for #content) I accidentally included an extra dash (-) at the very end of this line:

display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */   -

It’s kind of difficult to see. The extra dash is causing the other properties in the rule not to be read. Remove this extra dash and it should work OK. Sorry for the inconvenience.

By the way, the media query at the very end of your custom CSS is missing a closing right brace }. It doesn’t seem to negatively impact anything right now because it’s at the very end of your CSS, but if you happen to add any other rules after this, they won’t work correctly.

Hi @crouchingbruin,

Thanks for your answer. I removed the extra dash, but unfortunately the site is still not working properly. In CSS some words are red. Has that anything to with it?

Hmm, OK, I think I see why that extra dash was at the end of that line. It’s because it was supposed to go in front of this line in the same rule:

webkit-flex-direction: column;

Please change that line to this:

-webkit-flex-direction: column;

WOW! it worked! thank you so much!

@crouchingbruin you are terrific help with the code for the sections order! i really appreciate it!
i am very happy my site is now finally online, unfortunately the sections order css is not working in firefox?
and in internet explorer the website will not even load?
what can i do?

https://www.hovawartpup.be

Use the CSS from one of my later posts that has the more complete set of properties. For example:

/* Flexbox container */
#content {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
   -webkit-box-orient: vertical;
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
}

thank you! I indeed saw it in the other post. i think it works fine now. you rock!

Hi!!

It isn’t working on my page, can you help me?

https://demo.barainredning.nu/

Erika:
For #content, use this rule instead:

#content {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
   -webkit-box-orient: vertical;
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
}

Then, you left off an ‘s’ from the end of the selector for #testimonial. It should be #testimonials.

Thank you!

But now it looks really weird, do you know why?