Misc Mobile rendering issues and CSS suggestions

[Carreau]

The shell-content wiht blocks of code make the website rendering looks weird on mobile

.shell-content {
    min-width: 500px;
}

Seem to interfere wit mobile rendering issue by forcing the page to be too wide, which lead to while gap on the left:

Before/After removing the 500px min width

Can't be completely removed as the code blocks become unreadable, but I'm guessing those can be tweaked with media-screen queries

also:

.section3-box-content {
    margin: 30px 30px 30px 0;
}

Is not centered on mobile view either. 30px on all side is likely what you want on small screen (via media queries as well?).

.section2 seem to have the same issue but less visible.

There also seem to be a few screen width transition that are either off by one pixel between files or used only once:

// syle.css

// only transition at at 320
@media only screen and (max-width: 320px) { 

// syle.css only transition at at 400
@media only screen and (max-width: 400px) {

// section2.css only transition at at 420
@media only screen and (max-width: 425px) {
    .section2 .container {

Both of the following transition are off by 1px or 2px from the one in the theme used (bulma) and might lead to edge case behavior.

// contents.css
@media only screen and (max-width: 1088px) {
    .shortcuts-container {
        display: none;
    }
}

// section2.css
@media only screen and (max-width: 1090px) {
    .section2 .container {
        margin: 0 6vw;
    }
}

Chrome says there are transitions at 1087px,1088px, and 1090px maybe all those values should be collapsed ? Usually the less transitions the better has you have less screen width to test for rendering issues. These off-by-one are common even in framework as it is rarely clear in min-screen-width/max-screen-width if the end value is included or not.

New website looks great otherwise will try to review a content and give feedback ! Good work !

[joelachance]

@Carreau Thank you for the feedback! We'll take a look.

[joelachance]

I'm finding that our Hugo theme is contributing a good amount to the media-query pollution, cleaned that up as much as possible.

@Carreau , thanks again!