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!