BlueOwlCreative » Topic: Text Flowing outside of Button in Tablet and Mobile View http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/feed/ Sat, 18 Jul 2026 10:06:56 +0000 http://bbpress.org/?v=2.5.3-5249 en-US http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25540 <![CDATA[Text Flowing outside of Button in Tablet and Mobile View]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25540 Wed, 09 Dec 2015 23:37:44 +0000 kpastoors I have a full width button that when it is viewed in Mobile and Tabet view the text goes outside of the box..

I tried to fix it with “white-space: normal;” but it is not working well, the text is not centred nicely and some still goes outside the box. Any advice is appreciated!

.button.btn_full_width,
button.btn_full_width,
input[type="submit"].btn_full_width,
input[type="reset"].btn_full_width,
input[type="button"].btn_full_width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
white-space: normal;
}

]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25548 <![CDATA[Reply To: Text Flowing outside of Button in Tablet and Mobile View]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25548 Thu, 10 Dec 2015 10:18:06 +0000 BlueOwl Hi there,

Let me see your URL please? :)

]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25592 <![CDATA[Reply To: Text Flowing outside of Button in Tablet and Mobile View]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25592 Thu, 10 Dec 2015 20:41:48 +0000 kpastoors http://www.cafferepublic.com/

thankyou!

]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25602 <![CDATA[Reply To: Text Flowing outside of Button in Tablet and Mobile View]]> http://blueowlcreative.com/support_wp/forums/topic/text-flowing-outside-of-button-in-tablet-and-mobile-view/#post-25602 Fri, 11 Dec 2015 10:13:19 +0000 BlueOwl Hi,

First off congrats on the website, looking great! :)

Yes, saw the problem, it’s due to the displacement of the text that is applied in order to animate the icon. Since we don’t need the icon animation in responsive we shall get rid of it only for responsive, try with this (add to your Custom CSS in Theme options or your Child theme’s css file):

@media only screen and (max-width: 768px){
.button.icon_pos_before.btn_icon_anim_in span {
left: 0;
}
.button.icon_pos_before.btn_icon_anim_in i.icon {
   left: 0; 
   opacity: 1; 
}
.button.btn_full_width, button.btn_full_width, input[type="submit"].btn_full_width, input[type="reset"].btn_full_width, input[type="button"].btn_full_width {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}
]]>