Recent
Categories
View Replies (8)

J51_Jasmine Display buttons next to each other

  1. Issue
0
Votes
Undo
  1. SYSOPONLINE
    SYSOPONLINE
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 16 June 2020
  5.  Subscribe via email
I have the problem that I created colored buttons. These I would like to have now shown next to each other.
With a table it looks good but is absolutely not responsive

buttons.png

How can I arrange the buttons side by side so that they remain responsive



<table>

<tbody>

<tr>

<td>

<div><a class="button gruen" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne für</span> <br /><span class="line-2">Verden</span></a></div>

</td>

<td>

<div><a class="button pink" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne für</span><br /><span class="line-2">Walsrode</span></a></div>

</td>

<td>

<div><a class="button blau" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne</span><br /><span class="line-2">ALT & AST</span></a></div>

</td>

<td>

<div><a class="button orange" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne</span><br /><span class="line-2">Bürgerbus</span></a></div>

</td>

</tr>

</tbody>

</table>
Attachments (1)
buttons.png buttons.png
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Possibly the quickest and easiest option would be to wrap them in a flex container like so....

<div style="display:flex;">

// Your buttons

</div>


You you require further tweaks, paste a URL to an example of the above.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
SYSOPONLINE
SYSOPONLINE
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
thanks a lot Ciara,
the buttons are shown correctly on a normal display. But as soon as I call up the page on my mobile phone, the buttons are not displayed one below the other.

responsive.png 



<div style="display: flex;">

<div><a class="button gruen" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne für</span> <br /><span class="line-2">Verden</span></a></div>

<div><a class="button pink" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne für</span><br /><span class="line-2">Walsrode</span></a></div>

<div><a class="button blau" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne</span><br /><span class="line-2">ALT & AST</span></a></div>

<div><a class="button orange" href="https://www.vbn.de/service/linienfahrplaene" target="_blank" rel="noopener"><span class="line-1">Fahrpläne</span><br /><span class="line-2">Bürgerbus</span></a></div>

</div>
Attachments (1)
responsive.png responsive.png
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try enabling wrapping on your flex container like so...

<div style="display: flex; flex-wrap: wrap;">

// Buttons

</div>


If that fails may I suggest posting a URL to a live version of your buttons.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
SYSOPONLINE
SYSOPONLINE
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
It works!!!
Ciaran you are the best!
Thank you so much.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
SYSOPONLINE
SYSOPONLINE
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

i have a last question.

I have centered the text vertically and horizontally.
Firefox_Screenshot_2020-07-29T08-13-28.651Z.png 




a.button {

  height:        120px;

  width:        100%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight:    bold;

  overflow:      hidden;

  border-radius:    25px;

  background-image: url(/images/sitebar-white.png);

  background-repeat: no-repeat;

 }


Unfortunately, I can't get any more distance between the buttons. What could be the reason for this?
I tried margin-left. But that somehow doesn't work :(



a.button {

  height:        120px;

  width:        100%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight:    bold;

  overflow:      hidden;

  border-radius:    25px;

  background-image: url(/images/sitebar-white.png);

  background-repeat: no-repeat;

  

}



a.button:hover{

	 -webkit-transform: scale(1.4);

    -moz-transform: scale(1.4);

    -ms-transform: scale(1.4);

    -o-transform: scale(1.4);

	transform: scale(1.4);

}





a.button.pink {                  /* pink */

  color:        #93AB2D;

  background-color:  #DD007A;



}





a.button.petrol {                /* petrol */

  color:        #E18E0C;

  background-color:  #006577;



}





a.button.orange {                /* orange */

  color:        #d90077;

  background-color:  #FA8F03;



  

}





a.button.mint {                  /* mint */

  color:        #DC0678;

  background-color:  #2C9B8B;



 

}





a.button.lila {                  /* lila */

  color:        #E18E0C;

  background-color:  #A00D78;

 

  

   

}





a.button.gruen {                /* grün */

  color:        #DC0678;

  background-color:  #8EB615;





}



a.button.braun {                /* braun */

  color:        #d90077;

  background-color:  #693923;



   

}



a.button.blau {                  /* blau */

  color:        #DC0678;

  background-color:  #00A6C6;



  

}



a.button:link span,

a.button:active span,

a.button:visited span {

  color:         #fff;  

  font-weight:    bold;

  

}



a.button > div {

  padding:      15px;

  line-height:    1;

  

}



a.button > div p {

  padding:      10px 0 0 0;

 

}



a.button span.line-1 {

  font-size:      18px;

  display: table-cell;

  vertical-align: middle;

 

}



a.button span.line-2 {

	font-size:      18px;

	display: table-cell;

	vertical-align: middle;

}





a.button:hover span.line-1 {

  font-size:      20px;

}



a.button:hover span.line-2 {

  font-size:       20px;

}



a.button:hover > div p {

  display: none;

}

.btn, .button, button, .owl-prev, .owl-next, .pagenav a {	



}
Attachments (1)
Firefox_Screenshot_2020-07-29T08-13-28.651Z.png Firefox_Screenshot_2020-07-29T08-13-28.651Z.png
  1. more than a month ago
  2. Commercial Templates
  3. # 5
SYSOPONLINE
SYSOPONLINE
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
i fixed it with <div style="display: flex; gap: 10px;">

but now it doesent responsive :(

hmm with <div style="display: flex; flex-wrap: wrap; gap: 10px;"> it works.
no idea if this is the right one? ^^
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL and access details for this issue? Details can be sent to info@joomla51.com. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Note using flex-wrap: wrap; is probably be the best solution here.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok