What are the Breakpoint Resolutions for XPro?

Support
#1

Inside of customize you have available 5 different breakpoints.
What are the resolutions for each of those breakpoints?

#2

Hi There,

Thank you for writing in and good question, that is:

Extra Large - 1200px & up
Large - 980px to 1199px
Medium - 768px to 979px
Small - 481px to 767px
Extra Small - 480px and below

Actually, these was indicated in the responsive view options.

Hope it helps,
Cheers!

#3

Forgot about those! Thanks :slight_smile:

#4

You are most welcome!

#5

Ok so I am trying to address placement of copy and graphics and I am grappling with what happens in the gap between 1200 resolution and 1900 resolution.

How can we effectively manage that using xpro?
This is the website

It has a breakpoint layout for 1200 and for 980
But my breakpoint for 1200+ is also try to address positioning for larger screens too which doesn’t seem to work very well.

How can we address layout for bigger resolutions?

#6

Hello @mrdfrost,

The breakpoint beyond 1200 is managed by the 1200 setting only. Would you mind provide us a screenshot to show which of the gap you’d like to address? If you want to make sure that the background image will cover whole section, please make sure that the background image size is 100% 100% because a single 100% will not do that.

Please let us know how it goes.

#7

Here’s a screencap

#8

Hey @mrdfrost,

Thanks for the screencast. That helped.

Your background scales up or down but your text size remains the same so it can’t stay in place relative to the background.

You can use one or a combination of these techniques to help you achieve the positioning that you need:

  • Use one or more Gap elements as responsive spacer. For example, add a Gap element below your first block of text to push content down in large screens and hide that Gap element in smaller screens.

  • In order for your Text to scale up or down with the screen size, use the Responsive Text feature or responsive font size value. Please see the links below for an example:

Hope that helps.

#9

Hi thanks for this, I will try it out.
But it’s less about the size of the text and more about the placement relative to the background graphic.
How I can anchor the background graphic relative to the resolution of the screen. I am using a different resolution background for 1900, 1400, 1200, 980, 768 for example.

And then for the 1400 to 1900
How can I position my text elements.

#10

Just a side note, but I am using the video embed element.
2 things:

  1. It’s just showing as a white box
  2. How do I ensure it’s centered for each section breakpoint
#11

Hey @mrdfrost,

There is no option to anchor the text relative to the background per se that is why I suggested those methods to aid with positioning the text to a background that scales with the screen size. If scaling the text is not allowed in your design, the only option would be to use the Gap element.

It’s technically possible to position text but that would require complex CSS absolute positioning within different ranges of media queries and that would fall under custom development which is outside the scope of our support. For this, you’ll need to consult with a third party developer.

Regarding your video, you need to use the Embed code.

To center it, set the Right and Left margins to 0.

Hope that helps.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.