drozas / cecan

Repository for main website of CECAN (Centre for the Evaluation of Complexity Across the Nexus)
GNU General Public License v2.0
0 stars 1 forks source link

Resources Page #122

Closed drozas closed 4 years ago

drozas commented 4 years ago

We have drafted several new pages for this. Gail temporarily published a couple of the new pages to check how they look on a mobile but unfortunately the formatting goes awry and I'm not sure how to make them mobile-friendly.

drozas commented 4 years ago

As discussed, please find enclosed mobile phone screenshots of the new resources page (and it's linked pages). The formatting seems to be ok on a PC but not phones (or tablets most likely).

Screenshot_20200212-134502 Screenshot_20200212-134517 Screenshot_20200212-134529 Screenshot_20200212-134710 Screenshot_20200212-134809

drozas commented 4 years ago

Created template: `

COL 1A: Author 1 & Author 2

Title XYZ

test

COL 2A: Author 1 & Author 2

Title XYZ

test

COL 1B: Author 1 & Author 2

Title XYZ

test

COL 2B: Author 1 & Author 2

Title XYZ

test

COL 1C: Author 1 & Author 2

Title XYZ

test

COL 2C: Author 1 & Author 2

Title XYZ

test

`

drozas commented 4 years ago

https://www.cecan.ac.uk/node/513

drozas commented 4 years ago

Message submitted:

I have been taking a look at the third of the issues regarding the posters, resources (and other pages) not being properly displayed in the cell phones/tablets (https://github.com/drozas/cecan/issues/122). This issue is not related to Drupal, but rather to the way the contents have been created using tables. Tables are not rendered properly for responsive websites. For this purpose, front-end frameworks are employed. In the case of Drupal, the framework included by default in this theme is Bootstrap (https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)).

To make things easier, I have created a template with testing contents at https://www.cecan.ac.uk/node/513 (currently set as unpublished). To see the code you can enter in the edit mode of the node at https://www.cecan.ac.uk/node/513/edit and click on "Source". This example is for 2-columns (which becomes one when seen in narrower screens) as in the original posters design. With this template, you should be able to adapt it for the contents in the real pages. You can find alternative layout examples at https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp if needed.

drozas commented 4 years ago

Templates submitted