Sections Order

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

Thread Starter

RaulD

(@rauld)

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

Hardeep Asrani

(@hardeepasrani)

Hi,

Could you please explain this question? ??

Regards,
Hardeep

Madalin Milea

(@madalinm)

Hi guys,

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

Best regards,

Madalin

(@crouchingbruin)

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.

Thread Starter

RaulD

(@rauld)

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!!!

(@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;
}

Thread Starter

RaulD

(@rauld)

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

Thanks again!

(@crouchingbruin)

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.

nsingh22

(@nsingh22)

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

(@crouchingbruin)

@nsingh22, please provide a link to your site.

nsingh22

(@nsingh22)

The link is nrcocp.com

(@crouchingbruin)

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

nsingh22

(@nsingh22)