Mobile interface: Misalignment of navigation inline element, buttons & content

[faswebmaster]

Hi Support Team,

Please visit the respective pages on you mobile phone to understand the different issues. Please access pages through this url: https://www.fas.nus.edu.sg/admissions/academics/industrytracks/

1. The first page (Introduction)
   Issue: The paragraph “This is achieved through the…” is not positioned right beneath the gears icon. My intention is to have the paragraph positioned right beneath the gears icon since it represents the message of the paragraph. Please refer to the picture of a side-by-side comparison of a mobile interface and a desktop interface.

2. The second page (the five tracks)
   Issue: Insufficient spaces above and below all content area modal elements “List of complementary majors”. An example is as shown.

3. “Overview of Requirements” page (first item of submenu)
   Issue: No gaps between the four vertically stacked buttons:

4. “FASS Industry Seminar” page
   Issue: Paragraph that is supposed to position beneath the light bulb icon has been cut off. Here’s a side-by-side comparison of the mobile and desktop versions:

5. On all pages, the navigation inline element is squeezed and misaligned.

[ruenel]

Hello Joy,

Thanks for writing in!

1.) You have inserted a broken html in the feature box. You inserted this:

<b>Industry Tracks Offered

Please remove the <b> tag or at least close it properly like:

<b>Industry Tracks Offered</b>

2.) You will need to add a bottom margin for the toggle button of the content area so that in a smaller screen, the bottom margin will serve as a gap between the columns.

3.) Same with #2. You will have to add bottom margins to each of the button elements.

4.) Remove the -2.5em bottom margin of the section and the -50% bottom margin in the row settings.

5.) Yes, because navigation element is only for desktop screens. For smaller screens, you will need to insert Navigation layered or navigation collapsed element. You can show/hide this element by utilizing the “Hide During Breakpoints” option in the “Customize” tab of the navigation element.

6.) I have responded your other thread regarding this issue.

Hope this helps. Please let us know how it goes.

[faswebmaster]

Hi RueNel,

Thanks for your help! Everything is now optimised for viewing on mobile screens but there is another issue. There are large spacing between some words within the justified paragraphs as shown:

Please advise. Thank you.

[jade]

Hi @faswebmaster,

That is normal for the paragraphs where the text alignment is set to justified.

You may change the alignment of the text to left on mobile by adding this code in X > Theme Options > CSS:

@media (max-width: 480px) {
    p {
        text-align: left !important;
    }
}

Hope this helps.