Sections Order

Hi! Where you able to do this? I also have the same question…

No … I am still waiting for the answer I think that I will repost the question:/

Hi,

Could you please explain this question? ??

Regards,
Hardeep

Hi guys,

Unfortunately, you cannot do this from style.css. You have to change some lines in ctusomizer.php.

Best regards,

Madalin

Actually, you can change the order around any way you want using CSS flexbox. The rules below will move the About section before the Focus section:

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

#focus {
   order: 2;
}
#aboutus {
   order: 1;
}
#team {
   order: 3;
}
#testimonials {
   order: 4;
}
#latestnews {
   order: 5;
}
#contact {
   order: 6;
}
#footer {
   order: 7;
}

You will want to add this using a CSS plugin.

It works, but the bottombutton ribbon and the rightbutton ribbon now are in “order 0” can you send me the additional code for them … i would put: aboutus(1) bottombutton ribbon(2) focus(3) …. rightbutton ribbon (6) latestnews(7)… etc
Thanks alot CrouchingBruin!!!

Sorry, I didn’t have those two ribbons activated on my test site so I missed them. For the BottomButton Ribbon, use the separator-one class. For the RightButton Ribbon, use the purchase-now class:

/* Flexbox container */
#content {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}
#aboutus {
   order: 1;
}
.separator-one {
   order: 2;
}
#focus {
   order: 3;
}
#team {
   order: 4;
}
#testimonials {
   order: 5;
}
.purchase-now {
   order: 6;
}
#latestnews {
   order: 7;
}
#contact {
   order: 8;
}
#footer {
   order: 9;
}

Thanks alot, you’re a life saver! If I have any more questions, can I contact you?

Thanks again!

You’re welcome. If you have other questions about the theme, just post them here on the support forum and someone should be able to answer it. Zerif Lite also has another support forum here.

Hello,

I changed the order of the sections on my homepage using the CSS Flexbox. However, when I view my site on a mobile device, the sections are not in the correct order (purchase now ribbon should come after About us section but on my iPhone, the purchase now ribbon is coming after the Team section. Any advice on how I can resolve this issue since everything looks fine on a desktop/laptop.

Here is my CSS flexbox:

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

#focus {
order: 1;
}
#aboutus {
order: 3;
}
#team {
order: 5;
}
.purchase-now {
order: 4;
}
.separator-one {
order:2;
}
#contact {
order: 6;
}
#footer {
order: 7;
}

@nsingh22, please provide a link to your site.

The link is nrcocp.com

It looks fine on my iPhone, using both Safari & Firefox. What phone/browser are you using? It could be you need to add some additional properties to support other browsers.

Change everything to this:

/* 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+ */
}
#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+ */
}
#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+ */
}
.purchase-now {
   -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+ */
}
.separator-one {
   -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+ */
}
#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+ */
}

The site looks fine on my phone now – I did a software update so maybe that fixed the problem.

Thanks for the help however!

I was having the same problem with the order. I tried changing it with the CSS editor, but now I’ve messed up my entire website. I already deleted the CSS but it’s not changing back to how it was. Can someone please help me? ‘Cause now it looks like one big mess > https://www.tessavdbrink.nl

Thanks!