Mobile View

  • Resolved mrpetreli

    (@mrpetreli)


    3 years, 8 months ago

    Hi,

    I managed to create the menu in horizontal view, but how would I make it more presentable in mobile view. Its too long for horizontal view now, i would like it to wrap around…maybe flex wrap?

    My current code is

    .inlinemenu {
    float: none;
  padding-right: 25px;
  padding: -20px;
  padding-bottom: 10px;
  width: -3px;
  height: 0px;
  top: 9px;
  margin: 0px;
  list-style: none;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author linux4me2

    (@linux4me2)

    I don’t like the look of a wrapping horizontal menu. I think what I would do is wrap your custom code in a media query, so that the menu displays vertically unless the device/display is wide enough for the menu to display horizontally without wrapping.

    For example, say your menu starts wrapping when the display is less than 768 pixels wide, your CSS would look something like:

    
@media only screen and (min-width: 768px) {
    .inlinemenu {
        float: none;
      padding-right: 25px;
      padding: -20px;
      padding-bottom: 10px;
      width: -3px;
      height: 0px;
      top: 9px;
      margin: 0px;
      list-style: none;
    }
}

    You can use your browser’s developer tools’ mobile view to test the width to see what you need to substitute for the 768 pixels. Both Chrome and Firefox have that capability.

    Thread Starter mrpetreli

    (@mrpetreli)

    Thank you

    Used a version of
    @media only screen and (min-width: 768px), and split in 2 columns

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile View’ is closed to new replies.