Jump to content

Archived

This topic is now archived and is closed to further replies.

sfmstudios

Custom Button text wrapping

Recommended Posts

sfmstudios

I've created a custom pink button on http://www.chillspa.com, but the defined button does not wrap the text and I receive an overlap on certain screen sizes.  I'm looking for the button to dynamically change width and the text to wrap as the screen sizes change.  How would I best accomplish this?

 

Thanks, and here is the code:

 

/* Custom Pink Button */
.btn-pink {
  color: @white; 
  .buttonBackground(lighten(@pink, 10%),@pink);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);

  &:hover {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    color: @white;
  }
  &:active {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }
  width: 165px;
}
a.btn {
  color: white;
}

 

Share this post


Link to post
Share on other sites
Danny

HI,

 

Not sure what you mean to be honest, I have just reduced my browsers width to the smallest screen width possible and the buttons work as intended.

 

http://cl.ly/image/1g1S22371x04

 

Please be aware that we do not provide support for user created code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

This is what he means Danny

[attachment=2139:buttonoverspill (FILEminimizer).JPG]

 

Could this be caused by using pl grid-rows rather than columns?  In effect, his buttons are not remaining seperated and are running over each other at some screen res values


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Ah, well that is related to the way he has added his buttons.

 

Maybe you should try using a wrapping your buttons in a list ?

 

For example:

 

<ul class="inline">

<li>Button Code here</li>

<li>Button Code here</li>

<li>Button Code here</li>

<li>Button Code here</li>

<li>Button Code here</li>

</ul>

 

Then add the following to your custom CSS:

 

ul.inline, ol.inline {
margin-left: 0;
list-style: none;
}
ul.inline > li, ol.inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sfmstudios

Hi guys - thanks for the suggestions.  Ended up going with the list, along with the customization of the code - seems to work pretty well.  Much appreciated!

Share this post


Link to post
Share on other sites
Danny

No problem, happy to help and thanks for informing the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×