Icon Boxes in Response Mode

[halfcj]

Having some issue with icon boxes in Responsive mode where text extends outside Icon boxes where I have 3 side by side. Seems they need to stack when they become too narrow to allow for words to display correctly?
Can I somehow create a ‘minimum’ width for an icon box?

Please see attached.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

@media only screen and (max-width: 960px) { 
.spb_icon_box.col-sm-4 {
  width: 100%;
  margin-bottom: 30px;
}
}

– Kyle

[halfcj]

Brill. Solves the Portrait issue on iPad, but creates one for landscape responsive. If you flip my icon boxes, the text runs out of the bottom of the box

[Kyle – SUPPORT]

You have a couple of blank p tags in the icon box (see screenshot) Please remove these

– Kyle

Attachments:

You must be logged in to view attached files.

[halfcj]

Could see that in the classic HTML editor, but did see a space and removed it.

However, that does not solve the text being too low in the other two boxes? Text touches the bottom of the box.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 960px) { 
div.back.sf-icon-accent .sf-icon-box-content{margin-top:-20px !important}
}

Thanks 🙂
With Best Regards
Swift Ideas