Welcome! To use this support forum, please Login or Join Today!

   

Button Placing

{name}
Rank

Total Posts: 11

Joined 2015-07-23

PM

 

This is again probably a simple problem. I was wondering, is it possible to have buttons align next to each other? When I place two buttons, they automatically go underneath each other, even when I remove any formatting tags such as br and p. Failing that, is there any coding to set the maximum width of a button (i.e. make it 200px wide, or 100% so its responsive,  so they are all a uniform size despite whether the text is less than the required space).

http://pastproductions.co.uk/new/index.php/schools/resources/

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you want to center and stack two buttons side by side, you can do this but you’ll have to use HTML instead of the shortcode. The CSS is already there, so all you’d need to do is:

<div class="button default center">
<
a target="_self" class="button red" href="#">Red Button</a> <a target="_self" class="button green" href="#">Green Button</a>
</
div

which will give you this result:

http://cl.ly/image/203x053b1A1a


In the next update of the plugin, there will be a shortcode for button groups as well as better responsive breakpoints.

 

{name}
Rank

Total Posts: 11

Joined 2015-07-23

PM

 

Hi,
Is there anyway to change the size of that button using the html code? I’ve tried sticking the size=“large” code into it but it has no effect.

http://pastproductions.co.uk/new/index.php/schools/workshops/mayans/ buttons near the top of the page are the ones affected.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi, Are the buttons added via shortcode or is there manual HTML in the page?

If the latter, switch to html/text mode and find this line:

<div class="buttonĀ defaultĀ center">...</div

To fix the padding, change it to:

<div class="button-container default center">....</div

or if you want them much bigger, change to:

<div class="button-container large center">....</div

 

{name}
Rank

Total Posts: 11

Joined 2015-07-23

PM

 

Hi,

That worked ... however, they have now forced my responsive mobile website to widen the page. Is there anyway to make them responsive so that they automatically will go under each other if on a smaller screen?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you’ll add this to style1.css, you should be all set:

@media only screen and (max-width:768px{
    
.button-container {
        white
-spacenormal !important;
    
}
    
.button-container a.button {
     margin
-bottom10px !important;
    
}