Conversation
supportHi! 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!
@dgamoni Any info on that?
Hi @alexanderaugust Can you send me a link to your site?
Hi @dgamoni https://easywello.se/en/find-professionals/ Thank you in advance!
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%; } }
@dgamoni Any info on that?
Hi @alexanderaugust Can you send me a link to your site?
Hi @dgamoni https://easywello.se/en/find-professionals/ Thank you in advance!
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%; } }