Mobile View

  • Resolved alexanderaugust

    (@alexanderaugust)


    1 year, 7 months ago

    Hi!

    I have achieved a really beautiful design on the desktop view. This is great!

    But, the default mobile view is not good enough. Since the demo (demo map – Projects) on your website is also not good on mobile I wondered …

    (1) if it is actually possible to make it user friendly on mobile?

    (2) and if yes, then what would be the best way to go about it?

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter alexanderaugust

    (@alexanderaugust)

    @dgamoni Any info on that?

    Plugin Author dgamoni

    (@dgamoni)

    Hi @alexanderaugust

    Can you send me a link to your site?

    Thread Starter alexanderaugust

    (@alexanderaugust)

    Hi @dgamoni

    https://easywello.se/en/find-professionals/

    Thank you in advance!

    Plugin Author dgamoni

    (@dgamoni)

    HI @alexanderaugust

    try this css

    #bloc3 .map-nav-lists {
    display: flex;
    flex-wrap: wrap;
}

#bloc3 .map-nav-item {
    flex: 1 0 21%;
}

#bloc3 .map-nav-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    min-height: 308px;
}

.navlist-thumbnail {
    height: 100%;
}

.navlist-title {
    display: flex;
    flex-wrap: wrap;
}
.street {
    padding-left: 0;
    margin-bottom: 0;
}
.map-nav-item b {
    padding-right: 10px;
}
.post_tag {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}
.post_tag span {
   line-height: 1.2;
}

@media (max-width: 998px) {
   #bloc3 .map-nav-item {
       flex: 1 0 31%;
   }
}

@media (max-width: 768px) {
   #bloc3 .map-nav-item {
       flex: 1 0 41%;
   }
   #bloc1 {
       width: 100%;
       margin-bottom: 10px;
   }
#bloc2 {
    width: 100%;
       margin-right: 0;
   }   
}

@media (max-width: 480px) {
   #bloc3 .map-nav-item {
       flex: 1 0 91%;
   }
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile View’ is closed to new replies.