La communauté HubSpot est disponible en français.

Design Manager - Mobile layout manager (Stacking order)

Sometimes a web page simply does not look good when modules are stacked on top of each other in mobile view, a bank of icons like this page on our website is a good example http://info.hawktraining.com/programmes (Still in development so ignore the bugs and big images!). Imagine scrolling for several miles to get to the last icons on the page if they were stacked? A quick way to bounce visitors from this page.

 

With this page specifically, my current workaround is to create 2 module groups containing the same content, the second group is a custom HTML table which forces the icons into rows. I can then apply media queries to the group to hide each from desktop or mobile respectively.

 

@media (min-width: 768px) {
.custom_hidden-dt {display: none !important;}
}

@media (max-width: 767px) {
.custom_hidden-xs {display: none !important;}
}

 

There are obviously some problems with doing this as you are repeating content on a page, forcing content into tables which can have its own issues, increasing page loading times and possibly upsetting Google.

 

So my suggestion is to add a mobile layout editor to the design manager, allowing you to create a mobile layout if the natural stacking does not fit the page.

HubSpot updates
4 Commentaires
DonnaR
Contributeur occasionnel

Yes! Need to be able to customize mobie layout.

 

lbritt
Contributeur occasionnel

Yes! I have so much trouble with the layouts looking great on desktop and then the order of images, text, and CTA completely changes on mobile and it looks terrible.

erica11
Contributeur régulier

Agreed! Really need this functionality.

tsissons
Nouveau contributeur

Absolutely agree - a mobile view editor like what's available within Unbounce would be incredible to be able to toggle between. The automated responsive editor makes things look okay... to a point. Then it takes a really ugly turn.