How to edit mobile page

[Jaewoo97]

Hello,

Could you provide a brief description on how to edit the mobile page layout?

I would like the page layout (figure size, etc) to be different when accessed with computer and with mobile.

Thanks for a greate template!

Best,
Jaewoo

[rjzupkoii]

The template uses responsive web design so a lot of it is structured so that it really doesn't try to determine if you are using a computer or mobile device, but rather looks at the size of the screen you are using. In a couple places you can find code like the following:

  @media screen and (min-width: $sidebar-screen-min-width) {
    height: 100vh;
    overflow-y: auto;               // Add scrollbar if the sidebar is too long
    position: fixed;
    padding-top: $masthead-height;
  }

Which is explicitly checking that you are using a screen (as opposed to print or speech) and that the screen is at least a configured width before adding a scrollbar to the sidebar. There's also some code involved with the top menu, but for the most part, very little of the template attempts to distinguish based upon the screen size.