Hello there. I am currently developing a few pages for a client. But I seem to be stuck on how to create pages on mobile based on percentage widths.
Example, when I create a box on mobile, the page builder is not accepting “%” as a value but rather, it automatically reverts to pixels.
Any recommendation/s for this?
Thanks.
Hi there Daniela!
Great question! While Unbounce pages are Mobile Responsive, Unbounce page layouts aren’t fluid, which means that it’s not possible to create pages on mobile based on percentage widths. While fluid layouts are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.
We have a pre-determined ‘break point’ on our pages, meaning any user visiting from a device with a viewport width of 600px or wider (like someone viewing your page on an iPad, for example) will be served the Desktop version of your page, and anyone visiting from a device with a viewport smaller than 600px, like an iPhone 5, will be served the mobile version of your page.
I hope this information is helpful, Daniela. As you get started with Mobile Responsive, I’d recommend checking out this handy guide here: http://documentation.unbounce.com/hc/en-us/articles/203788184-Working-With-the-Page-Builder-#content2. If you have any other questions, definitely reach out to us at support@unbounce.com. We’d be happy to chat further!
Hi… came across this post as I have a similar question…
Are you saying that it is not possible to create a fluid layout with % widths using custom CSS in the Unbounce editor? Or to add different breakpoints (such as tablet)?
I’m finding some clients are looking for the “fluid” pages.
Thanks,
Mike
Hi Michael,
Yes that’s correct at this time. There were some substantial tradeoffs we had to make when optimizing Unbounce for Mobile Responsive last yearÑ the big one being accommodating the level of control and customization that customers wanted when building their pages which requires absolute positioning of elements and makes it hard to have fluid layouts. Since most landing pages are (should be) much simpler with less navigation and interaction than your typical website, the “desktop” version is usually fairly well optimized for tablets already. Fluid responsiveness wasn’t entirely necessary to enable our customers to optimized for their mobile traffic. I wrote a blog post about some of decisions here last year: http://inside.unbounce.com/product-dev/responsive-design-progress/
All that being said, we recognize that being completely device agnostic (fluid responsive to accommodate any and all devices) is important and we will definitely evolve in that direction. Out of curiosity, do your clients want “fluid” pages because they have clear indication of their traffic and what screen sizes they need to optimize for, or is it a matter of having seen some slick landing pages/websites and wanting to emulate them?
Hope that helps explain things a little Mike.
Cheers,
Carter
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
