Responsive column problem

[waynepatt58]

Have 2 problems here;

1 When the screen is made smaller the columns fold over each other however they do not fill the screen as you can see in the pics. The bottom column only uses half the screen, how can i fix that? The first pic is a normal screen, the second pic is where all the errors occur

2. The text in the column seems to overlap the other text when the screen is made smaller, look at reciprocating states and how it overlaps the number.

Any help would be appreciated.

[christian]

Hey @waynepatt58,

For your first problem, it’s because of your custom CSS.

A quick solution to that is to give that column a 100% width via the Element CSS. The code for that would be:

$el {
	width:100% !important;
}

The outcome should look like the screenshot below:

For your second problem, it’s because you’re using a Text element with a negative top margin. If moving the text to the bottom is allowed, you can add a Gap element that will show only in mobile using the Hide During Breakpoints feature between the Counter and the Text element.

An alternative setup would be to use Counter element’s Suffix that is under Setup settings instead? You can use <br> to break texts.

To achieve that look in that screenshot, you’ll regretfully need some CSS in the Counter’s Element CSS though. Here’s the CSS I’ve used.

/* target the container housing the number and the suffix */
$el .x-counter-number-wrap {
  display: flex;
  justify-content: center;
}
/* target the suffix */
$el .x-counter-number-suffix {
  font-size: 0.5em;
  margin-left: 5px
}

Please play around with the values to adjust according to your design needs.

Hope that helps.