Sections Order

Erika, please see my previous comment. You need to use this for #content:

#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;
}

You have this:

#content
{
    display:-webkit-box;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    flex-direction:column
}

Hi! I have change it to the long one in my css but it isn’t working, i don’t know what els to do ??

Hello Erika,

This option is available in the Pro version of the theme, so you could consider upgrading to it.
Rather than that, i can’t help you with customization code for this, because we manly fix issue that occur with our products.

Best regards,
Alexandra

Erika, is this still the site you are referring to?
https://demo.barainredning.nu/

I still see the old CSS in the custom CSS section.

Hi, Alexandra. Sorry, didn’t mean to intrude on your support here. This will be my last thread.

Hi,

It’s not a problem. We are really glad to see users helping each other. ??
So thank you for your efforts.

Best regards,
Alexandra

Thanks for your help here

Hi,

Question: If you change settings or information in the customizer dialog of zerif lite, where are these changes recorded then? So which file has these changes in it?

Tessa

Theme options are typically stored in a database table, not a file. If you know how to use your host’s MySql interface, you could probably view them, and even change them, but it’s best to go through the Customizer so you don’t accidentally mess anything up.

@tessa, if you have any other questions regarding the theme, especially if they are not related to the original post, please start a new thread. Thanks.

Hi CrouchingBruin,

I carefully followed your instructions for my website https://www.youslick.com to reorder my sections and for browser Chrome it works great:

/* Flexbox container */
#content {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}

#focus {
order: 1;
}

#testimonials {
order: 2;
}

#aboutus {
order: 3;
}

#contact {
order: 4;
}

#team {
order: 5;
}

#latestnews {
order: 6;
}

#footer {
order: 7;
}

On the other hand, for Firefox (version 45.0.2) and Explorer (version 11) the section order for TESTIMONIALS (which I called “Cards” in the website) and ABOUT is reverted.

Like you have suggested, I have used the following code:

/* 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: 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+ */
}

#testimonials {
-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: 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: 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: 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+ */
}

Unfortunately I am facing issues:
1) Through Chrome my website is messy (it only has focus section, half page of about session)
2) Through Explorer/Firefox I still have the original issue explained above.

Can you please assist?

@luca, can you please add the second set of CSS back in? When I try using it on your web site, the ordering and the layout looks OK. Right now I see the old set of rules.

Never mind, I’ve sorted it myself!
Too many browsers in the code above seemed to have caused conflicts perhaps?
In the code below I made it work for Google/Firefox/Chrome/Mobile browsers with the correct section order.

/* Flexbox container */
#content {
display: flex;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
flex-direction: column;
}

#focus {
order: 1;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#testimonials {
order: 2;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#aboutus {
order: 3;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#contact {
order: 4;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#team {
order: 5;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#latestnews {
order: 6;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

#footer {
order: 7;
/* NEW, Spec – Opera 12.1, Firefox 20+ */
}

CrounchinBruin, for curiosity I put back the CSS code for you to analyse my broken site.

/* 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: 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+ */
}

#testimonials {
-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: 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: 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: 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+ */
}

I don’t understand, your code is spotless but it doesn’t work on my site (click on “Features” using Chrome or click “Cards” using Explorer/Firefox and you’ll understand why); on the other hand I made the changes applied in my previous post and it works fine with all browsers, weird!

I leave my website purposely broken for 30 min so that you can have a look if you wish, I’m just interested to understand why it happens for knowledge, as I have the solution anyway…

OK, good. There seems to be some sort of caching problem, because I still see your site as kind of messed up, and I’ve refreshed my browser.