0

I have setup a conference website: http://www.nzbcs.org.nz/index.html.

But I do not know how to make it display in a different order, i.e. the center column first, followed by the left and right columns, on a mobile device.

Any help is much appreciated.

Below is the @media codes in the index.html. There are 159 @media entries in the "sites36f3.css". 

@media screen and (min-width: 767px) {
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) div.paragraph,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) p,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-block .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-description,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    .wsite-elements.wsite-footer div.paragraph,
    .wsite-elements.wsite-footer p,
    .wsite-elements.wsite-footer .product-block .product-title,
    .wsite-elements.wsite-footer .product-description,
    .wsite-elements.wsite-footer .wsite-form-field label,
    .wsite-elements.wsite-footer .wsite-form-field label {}
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) h2,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-long .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-large .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-small .product-title,
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    .wsite-elements.wsite-footer h2,
    .wsite-elements.wsite-footer .product-long .product-title,
    .wsite-elements.wsite-footer .product-large .product-title,
    .wsite-elements.wsite-footer .product-small .product-title {}
    #wsite-title {
        font-size: 30px !important;
    }
    .wsite-menu-default a {
        font-size: 13px !important;
    }
    .wsite-menu a {}
    .wsite-image div,
    .wsite-caption {}
    .galleryCaptionInnerText {}
    .fancybox-title {}
    .wslide-caption-text {}
    .wsite-phone {}
    .wsite-headline,
    .wsite-header-section .wsite-content-title {}
    .wsite-headline-paragraph,
    .wsite-header-section .paragraph {}
    .wsite-button-inner {}
    .wsite-not-footer blockquote {}
    .wsite-footer blockquote {}
    .blog-header h2 a {}
    #wsite-content h2.wsite-product-title {}
    .wsite-product .wsite-product-price a {}
}
VKen
  • 4,964
  • 4
  • 31
  • 43
NZBCS
  • 1
  • 1
  • If you're running plain html page without a backend that does sorting. You may find help here: https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript – VKen Nov 03 '19 at 05:41
  • It is not about sorting. I know a mofication of the "wsite-multicol-table" in the CSS will make the middle cell show first in a mobile device. Unfortunately, that's beyond me. – NZBCS Nov 04 '19 at 07:26
  • OK, I just had a look at your site, and deciphered what `.wsite-multicol-table` is about. This is made with weebly (editmysite.com) and it is their custom CSS from their website builder. What you're talking about, is the "page layout". There are some tricks to it and one of them is by using `display: flex`. – VKen Nov 04 '19 at 12:35

1 Answers1

1

I've copied the essential part of your website to demonstrate.

You can do the column re-order using display: flex, and also set the order for the child elements.

Example below to rearrange the layout columns for your HTML.

You may find out more from here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Also, I would like to caution by quoting the above link:

The order property and accessibility

Use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction. Using order changes the order in which items are painted, and the order in which they appear visually. It does not change the sequential navigation order of the items. Therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.

By tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. To read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.

.flex {
  display: flex;
}

.flex :nth-child(1) {
  order: 3;
}

.flex :nth-child(2) {
  order: 1;
}

.flex :nth-child(3) {
  order: 2;
}

.wsite-multicol-table {
  position: relative;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.wsite-multicol-col {
  vertical-align: top;
  margin: 0 !important;
  border: 0 !important;
  padding: 0;
  -moz-box-sizing: border-box;
}
<table class="wsite-multicol-table">
  <tbody class="wsite-multicol-tbody">
    <tr class="wsite-multicol-tr flex">
      <td class="wsite-multicol-col" style="width:22.666666666667%;padding:0 15px;order: 10;">column 1<br>stuff</td>
      <td class="wsite-multicol-col" style="width:56.816326530612%;padding:0 15px;order: 0;">column 2<br>more stuff</td>
      <td class="wsite-multicol-col" style="width:20.517006802721%; padding:0 15px;">column 3<br>other stuff</td>
    </tr>
  </tbody>
</table>

I'm not sure how much you can edit in weebly, as it has been more than 5 years since I last used it.

In addition, if you want to show differently on mobile devices, you might need to use CSS media queries, usually with the @media declaration. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

For media queries, usually we control by screen-size, source: https://stackoverflow.com/a/16443861/498031

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
  .flex {
    ...
  }
  .flex :nth-child(n) {
    ...
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}
Community
  • 1
  • 1
VKen
  • 4,964
  • 4
  • 31
  • 43
  • Thanks. Your way can easily reorder the cells to display. I am after the a responsive coding to let the current middle column/cell to be displayed in a mobile device before the first column/cell. Therefore, CSS media queries are required. Any idea to achieve that? – NZBCS Nov 05 '19 at 04:54
  • @NZBCS If you like the answer, please accept and upvote. The suggested solution above is under the assumption you can input your own CSS. The CSS media queries article is linked at the bottom of the answer. What you need to do is to declare the query as `@media screen and (min-width: 900px) {.flex{...} .flex :nth-child{...} }` You have to set with min-width, or width range (e.g. min-width max-width) to fit the mobile device's screen. https://developer.mozilla.org/en-US/docs/Web/CSS/@media . A related question: https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points – VKen Nov 05 '19 at 08:02
  • Thanks again for your time and effort to help. The current website is already responsive and is able to adjust the layout of the three columns (actually the three table cells #1, #2, #3) according to the screen size. You can see this by adjusting the window size on your desktop computer. Unfortunately, the three columns appear in the order coded in the html. What I want is to re-order the layout to #2, #1 and #3 when the screen size is reduced, e.g. in mobile devices. However, this conditional re-ordering is what I do not know. – NZBCS Nov 05 '19 at 19:35
  • @NZBCS can you edit the CSS or HTML? If so, search the existing CSS for the `@media` declaration that fits the (mobile) screen size of your your choice, that is where it will do the conditional styling by screen size or other property declared in the `@media`. Insert the CSS property declaration as above (recommended either in a new class ".flex", or directly in ".wsite-multicol-tr" which is not recommended), you may include the new class `.flex` as shown in ``. – VKen Nov 06 '19 at 00:30
  • Hi VKen. I extracted the @media part in the index.html. However, there are too many of them in the "sites36f3.css". I added your coding under the .wsite-multicol{position:relative;direction:ltr} in the CSS, and included the in the html. But it only forced the three colums shown in the specified order. It will not be responsive. (In additon, that will also change the layout of the three columns. That is not I want) – NZBCS Nov 06 '19 at 01:18
  • @NZBCS I've attempted editing your site in the chrome inspector and it works. Perhaps you have declared in the wrong class it is not `.wsite-multicol` class but `.wsite-multicol-tr` (which is not found in the CSS) and also perhaps you have forgotten to declare the `.wsite-multicol-tr :nth-child()` child elements parts and their respective `order` declaration? You have to look at all the `@media` width declarations and find which one triggers for which screen size. – VKen Nov 06 '19 at 03:31
  • Hi VKen. I made changes to the "@media screen and (min-width: 767px) " and include ".wsite-multicol-tr.wsite-multicol-tr :nth-child()" in the index.html (renamed to index1.html) and added yours to the "sites36f3.css" (renamed to sites36f3m.css). However, index1.html behaved differently from the original index.html. – NZBCS Nov 06 '19 at 10:44
  • @NZBCS: You've achieved re-ordering. Is that not what you wanted? The `@media screen and (min-width: 767px)` means any screen-width above 767px will apply. However, from your site, I see that in [index1.html](http://www.nzbcs.org.nz/index1.html) you have also implemented the `.flex` class which is global. "Global" means you did not put the ".flex" inside an `@media` block. To put in the block, you need to wrap them within like this `@media screen and (min-width: 767px){ .flex{...} .flex :nth-child(n){...} }`. Unminify, your css with tools https://unminify.com/ , find and fix, then minify back. – VKen Nov 06 '19 at 11:05
  • Dear VKen, thank you so much. I did what you said and moved the ".flex" code to the @media section. Now the index.html works as I wanted. Again, I appreciate your professional knowledge. – NZBCS Nov 06 '19 at 20:33
  • @NZBCS Glad to know that it worked. Please accept the answer and upvote if it has helped you. – VKen Nov 07 '19 at 00:58