How to override default breakpoint?

Hi Justin,

Thanks for the reply.

Try your “Sassy” template, maximize, then shrink your window. See? There’s a wide range of window sizes for which the right side of the page just just unceremoniously chopped off. No self-respecting “responsive” page would do such a thing, right? The issue is that the minimum width of the template’s desktop UI is >600px. That’s a problem if you’re going to fix the breakpoint to 600px. No sweat if you can change the breakpoint, lousy experience if you can’t. See what I mean?

Best,

Chris

Okay, sure thing. See screenshots attached. Steps to produce:

1. Create a new page with the Sassy template.

2. Click Preview.

3. Shrink browser window to before it reaches its 600px breakpoint.

4. Observe how awful it all looks. Take screenshots. (Attached.)

Can I be the only one who actually shrinks my browser window to see how things will look for users at different browser sizes? It seems unbelievable to me, honestly. Am I missing something huge/obvious? This seems like such a major, in-your-face problem. And I’m having a very hard time convincing myself that I can, in good conscience, use Unbounce landing pages that behave this way.

Thanks,

Chris

P.S. And lest you think this is just one template, I just tried: Produkto – same awful experience – and Good Bank – same awful experience. If you believe the sorting by popularity, these are the top three Unbounce templates. I can try more, but I’m guessing that these are not unique. What gives? Everybody is content to just have awful-looking pages for browsers at these intermediate widths between mobile-narrow and very-wide? Why not show the mobile-width version rather than a version that has content chopped off? It seems to defy all logic. What am I missing?

Thanks, Joe. It makes me feel better to confirm that I’m not totally crazy/blind here. Perhaps because we have lots of small-organization users throughout the developing world – without the latest high-res Macbooks on their desks – this affects us more than others. But I’d be surprised if there weren’t a zillion less-than-800px-wide browser windows out there even for the average Unbounce user.

I will hang tight and hope that the Unbounce team comes to their senses. It’s literally one CSS setting. They just need to open it to configuration, or give us a work-around to configure it.

Thanks again,

Chris

Same issue, same ‘Sassy’ template!

I discovered this same bug when testing on an iPad in Portrait mode, which represents itself as 768px wide, clearly in the gap between 600 - 800px. The content on the right side is getting cut off.

Edit: Found a post from Unbounce regarding tablet-specific breakpoints:

/topics/announcing-mobile-responsive-open-beta-launch
 Justin Veenema, Online Community Strategist

Hi Gian, 
Perhaps I can give a bit of clarity here. Our Mobile Responsive functionality works by utilizing a single breakpoint that defines if the page should be displayed as  desktop or  mobile. This breakpoint is based on browser width, so if a browser under 600px wide tries to view the page - it will automatically display the mobile version. This ensures that your users will get the best experience, whether they’re on desktop or mobile. 

Tablets are a bit different. Generally, when a full-size website loads up on a tablet in landscape view, it will display just as it would on a desktop browser. However, when a page is loaded on Safari in portrait view, the browser will either attempt to load the full-size website zoomed out; or load a tablet specific version of the page. 

Although we don’t have tablet specific mobile break-points, you should be able to load the desktop version on both landscape and desktop without too much of an issue. We’re currently seeing a small bug when initially loading responsive pages in portrait view (only 95% of the page is visible), but this is something we’re aware of and should have a fix for in the future. In the meantime the user might need to pinch-to-zoom to see the entire page, which is something any tablet user will intuitively understand to do. 

Our Mobile Responsive functionality has been implemented to ease the pain point of developing separate mobile/desktop versions of each page. We’re still in Beta, which means some things aren’t final just yet, but we’re almost there and we’re happy to hear any feedback you have about the feature. 

Actually, the good news is that I just tested Sassy outside of the Unbounce editor and the published version does show the entirety of the page in Portrait view on an iPad. So Justin’s comment above was correct: On tablets (i.e. above 600px wide), the desktop view is displayed, but zoomed out to fit the full width of the page on the device. Within the Unbounce editor, it shows it as cropped (same thing happens if you drag your browser window smaller on a published version). But on an actual device it renders in full. Tip: If you are on a Mac, you can download XCode from apple and use their iOS simulator to view the page as it would appear on an actual device.

Hey Christopher, Joe and teamriab! The decision to set the mobile breakpoint at 600px was made based on finding the largest common viewport widths from the majority of mobile devices. As teamriab (and Justin earlier in this thread) point out Ñ you will get a different result if you look at your page in a web browser on the desktop at 768px vs. a tablet like the ipad in portrait mode at 768px. The tablet devices should automatically render the desktop version of your page, but shrink it down enough to fit the entire screen (so that it’s not clipped.) Because most landing pages are generally simpler and less interactive that your average website, showing the desktop version on a tablet has proved to be effective enough for most campaigns. I completely understand if this isn’t the case for you though, and would love to hear more about your tablet and 600px+ traffic that you feel is being affected. 

We are working towards building in more visibility around mobile vs. desktop reporting, but for the time being do you have Google Analytics integrated? Are you able to see if you’re receiving a lot of desktop traffic with screen resolutions below your standard desktop page width (940px for many of our templates)?

Cheers,
Carter

Hey Christopher, in an ideal world (and one we are ultimately working towards) there would be no browser/device width that content is not optimized for. One of the challenges we faced when building out Mobile Responsive on our current Page Builder is that the flexibility in on our drag-and-drop builder, the ability to move elements anywhere you want and have total control over layout and positioning, is also one of the reasons why it’s harder to handle a “liquid layout” of content to accommodate all screen sizes like you might expect. Today we use what’s called “absolute positioning” to control where elements are placed on the screen. For the majority of customers, this flexibility of the page builder has been more important than optimizing the edge-cases where a screen or browser is in an sub-optimal state like you have described. This is an area we do intend to evolve over time though as we gather data on whether those edge cases are growing.

Hope that helps provide some context.

I’d like to +1 Christopher’s comments. I’m having the same problem with a custom template and I’m feeling very frustrated. 

Hello there,

what I am not getting from the conversation below is:
a) is unbounce working toward a third breakpoint oput of the box(meaning seperate tablet experience)
b) is there any way to manipulate a site so that there is a way to change the default breakpoint of a template

We see 20% plus traffic on our sites coming from tablets and first tests indicate that we can lift conversion by around 30% if we offer an adjusted tablet landingpage - so this is starting to be a real bummer for us.

Would be very cool if I could get a rough estimate on when this might find it’s way in the service, also I appreciate any workaround that is worth a try :).

+1 I would like to have an editable breakpoint option too.

Yeah would love to see a custom breakpoint.

@Christopher_Robert What i ended up doing was using a CDN for bootstrap/materializecss/ etc. using their grid system i and custom coding html i was able to fix this issue.

I agree with you-- Its a shame that unbounce neglects these breakpoints out of the box. Clearly everyone doesn’t function their web views @ 600px OR 1600px width. Furthermore, not being TRUELY responsive, and stumbling upon a clipped page chips away at my brands credibly in the eyes of a new user.