Adding buttons side by side in Hubl

Developer Support APIs & Integrations
1

I need to know how to make this code have two buttons side by side.

{% if module.content or module.mobile_content or module.button.button_type or module.image_field.src %}
<div class=“banner”>
<div class=“row”>
<div class=" span6">
<div class=“–header-text”>
<div class=“desktop_cntnt”>
{{ module.content }}
</div>
<div class=“mobile_cntnt”>
{{ module.mobile_content }}
</div>
{% if module.button.button_type %}
<div class=“btn_wrpr”>
{% if module.button.button_type==‘standard’ %}
{% if module.button.button_text %}
{% set href = module.button.button_link.url.href %}
{% if module.button.button_link.url.type is equalto “EMAIL_ADDRESS” %}
{% set href = “mailto:” + href %}
{% endif %}
<a href=“{{ href }}”
{% if module.button.button_link.open_in_new_tab %}target=“_blank”{% endif %}
{% if module.button.button_link.rel %}rel=“{{ module.button.button_link.rel }}”{% endif %}
>
{{ module.button.button_text }}
</a>
{% endif %}
{% endif %}
{% if module.button.button_type==‘cta’ %}
{% cta guid=“{{ module.button.cta_button }}” %}
{% endif %}
</div>
{% endif %}
</div>
<div class=“–bg-primary”></div>
</div>
<div class=" span6">
{% if module.image_field.src %}
<img src=“{{ module.image_field.src }}” alt=“{{ module.image_field.alt }}”>
{% endif %}
</div>
</div>
</div>
{% endif %}

2

Hi, @CMoore40 :waving_hand: Thanks for reaching out. Hey, @Indra @FabianRichter, do you have any quick styling tips for @CMoore40?

Thanks for looking! — Jaycee

3

Hi Jaycee,

I have tried changing CSS and div and it still lines up stacked. Here is the HTML + HubL and CSS. Will you see what else I can do please?

<button type=“submit” class=“green margin-right”>Confirm</button> <button type=“submit” class=“magenta”>Cancel</button> </div>

.banner {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
height: 90vh;
}

.banner .--header-text {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
height: 90vh;
flex-direction: column;
padding-left: 5.25rem;
}

.banner h1 {
color: #fff;
font-size: 3vw;
margin-bottom: 60px;
display: block;
}

.banner ul {
margin-bottom: 60px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
margin-top: 0;
}

.banner ul li {
color: #fff;
font-size: 1.1vw;
flex: 1 0 100%;
margin-bottom: 5px;
display: list-item;
list-style-type: disc;
}

.banner .btn_wrpr a {
background-color: #fff;
color: #00ac6a;
font-weight: 600;
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: normal;
padding: 13px 30px;
outline: 0!important;
font-size: 1.2vw;
}

.banner .btn_wrpr a:hover {
background-color: #fff;
color: #00ac6a;
}

.banner .--bg-primary {
height: 90vh;
position: absolute;
left: 0;
right: -5.5vw;
top: 0;
bottom: 0;
border-bottom: 90vh solid #00ac6a;
background-color: transparent;
z-index: -1;
border-right: 21vh solid transparent;
}

.banner img {
bottom: 0;
position: absolute;
width: 60vw;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 5% 100%;
object-position: 5% 100%;
right: 0;
top: 0;
z-index: -2;
max-width: none;
}

.banner .span6{
position: relative;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 1025px){
.banner .--bg-primary{
border-right: 10vh solid transparent;
transition: border-right .3s;
}
.mobile_cntnt{
display:none;
}
}

@media (max-width: 1024px){
.desktop_cntnt{
display:none;
}
.banner h1 {
font-size: 24px;
text-align: center;
}

.banner ul, .banner p {
font-size: 16px;
margin-bottom: 50px;
text-align: center;
max-width: 400px;
color:#fff;
}

.banner ul li {
font-size: 16px;
text-align: left;
}

.banner .btn_wrpr a {
font-size: 16px;
text-align: center;
}

.banner {
overflow: hidden;
}

.banner img{
width: 70vw;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 31px 87%;
object-position: 31px 87%;
width: 100%;
height: 100%;
transform: scale(1.9);
}

.banner .span6{
width:100%;
}

.banner .span6:last-child {
order: 1;
height: 35vh;
}

.banner .span6:first-child {
order: 2;
}

.banner .--bg-primary {
border-right: 370vh solid transparent!important;
transition: border-right .3s;
border-bottom: 55vh solid #00ac6a;
height: 54vh;
right: 0;
width: 100%!important;
}

.banner .--header-text {
height: 50vh;
align-items: center;
padding-top: 15vw;
padding-left: 0;
}

}

@media (max-width:767px){

.banner .btn_wrpr a {
font-size: 16px;
text-align: center;
}

.banner {
overflow: hidden;
}

.banner img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 31px 87%;
object-position: 31px 87%;
width: 100%;
transform: scale(1.9);
height: 100%;
margin: 0;
}

.banner .--bg-primary {
border-right: 370vh solid transparent;
transition: border-right .3s;
border-bottom: 55vh solid #00ac6a;
height: 54vh;
right: 0;
width: 100%;
}

.banner .--header-text {
height: 50vh;
align-items: center;
padding-top: 15vw;
padding-left: 0;
}

}

@media (max-width:767px) and (max-height:820px){
.banner {
height: auto;
padding-bottom: 20px;
}

.banner .--header-text {
height: auto;
}

.banner .--bg-primary {
height: calc(100% + 20px);
border-bottom: 73vh solid #00ac6a;
}
.banner .--bg-primary{
background: #00AC6A;
}
}

@media (max-width: 500px) {
.banner img {
transform: scale(1.5);
}
}

4

{% if module.content or module.mobile_content or module.button.button_type or module.image_field.src %}
<div class=“banner”>
<div class=“row”>
<div class=" span6">
<div class=“–header-text”>
<div class=“desktop_cntnt”>
{{ module.content }}
</div>
<div class=“mobile_cntnt”>
{{ module.mobile_content }}
</div>
{% if module.button.button_type %}
<div class=“btn_wrpr”>
{% if module.button.button_type==‘standard’ %}
{% if module.button.button_text %}
{% set href = module.button.button_link.url.href %}
{% if module.button.button_link.url.type is equalto “EMAIL_ADDRESS” %}
{% set href = “mailto:” + href %}
{% endif %}
<a href=“{{ href }}”
{% if module.button.button_link.open_in_new_tab %}target=“_blank”{% endif %}
{% if module.button.button_link.rel %}rel=“{{ module.button.button_link.rel }}”{% endif %}
>
{{ module.button.button_text }}
</a>
{% endif %}
{% endif %}
{% if module.button.button_type==‘cta’ %}
{% cta guid=“{{ module.button.cta_button }}” %}
{% endif %}
</div>
{% endif %}
</div>
<div class=“–bg-primary”></div>
</div>
<div class=" span6">
{% if module.image_field.src %}
<img src=“{{ module.image_field.src }}” alt=“{{ module.image_field.alt }}”>
{% endif %}
</div>
</div>
</div>
{% endif %}

5

Ok let me try to help you. I really don’t know, where there are two buttons in your code. Your button wrapper does only contain one a-tag. First you pasted the following code:

<div>
 <button type="submit" class="green margin-right">Confirm</button>
 <button type="submit" class="magenta">Cancel</button>
</div>

I don’t see that in your hubL and also not in your CSS.

Buttons are by default displayed inline. When you have a wrapper and some buttons like in this example, they are automatically positioned inline. If not, you added a different displaying method to it, like display: “block”.

6

Sorry, I sent the wrong code. Belwo is what I have now and the two buttons are on top of each other.

{% if module.content or module.mobile_content or module.button.button_type or module.image_field.src %}
<div class=“banner”>
<div class=“row”>
<div class=" span6">
<div class=“–header-text”>
<div class=“desktop_cntnt”>
{{ module.content }}
</div>
<div class=“mobile_cntnt”>
{{ module.mobile_content }}
</div>
{% if module.button.button_type %}
<div class=“btn_wrpr”>
{% if module.button.button_type==‘standard’ %}
{% if module.button.button_text %}
{% set href = module.button.button_link.url.href %}
{% if module.button.button_link.url.type is equalto “EMAIL_ADDRESS” %}
{% set href = “mailto:” + href %}
{% endif %}
<a href=“{{ href }}”
{% if module.button.button_link.open_in_new_tab %}target=“_blank”{% endif %}
{% if module.button.button_link.rel %}rel=“{{ module.button.button_link.rel }}”{% endif %}
>
{{ module.button.button_text }}
</a>
{% endif %}
{% endif %}
{% if module.button.button_type==‘cta’ %}
{% cta guid=“{{ module.button.cta_button }}” %}
{% endif %}
</div>
<div class=“btn_wrpr”>
{% if module.button.button_type==‘standard’ %}
{% if module.button.button_text %}
{% set href = module.button.button_link.url.href %}
{% if module.button.button_link.url.type is equalto “EMAIL_ADDRESS” %}
{% set href = “mailto:” + href %}
{% endif %}
<a href=“{{ href }}”
{% if module.button.button_link.open_in_new_tab %}target=“_blank”{% endif %}
{% if module.button.button_link.rel %}rel=“{{ module.button.button_link.rel }}”{% endif %}
>
{{ module.button.button_text }}
</a>
{% endif %}
{% endif %}
{% if module.button.button_type==‘cta’ %}
{% cta guid=“{{ module.button.cta_button }}” %}
{% endif %}
</div>
{% endif %}
</div>

.banner {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
height: 90vh;
}

.banner .--header-text {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
height: 90vh;
flex-direction: column;
padding-left: 5.25rem;
}

.banner h1 {
color: #fff;
font-size: 3vw;
margin-bottom: 60px;
display: block;
}

.banner ul {
margin-bottom: 60px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
margin-top: 0;
}

.banner ul li {
color: #fff;
font-size: 1.1vw;
flex: 1 0 100%;
margin-bottom: 5px;
display: list-item;
list-style-type: disc;
}

.banner .btn_wrpr a {
background-color: #fff;
color: #00ac6a;
font-weight: 600;
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: normal;
padding: 13px 30px;
outline: 0!important;
font-size: 1.2vw;
}

.banner .btn_wrpr a:hover {
background-color: #fff;
color: #00ac6a;
}

.banner .--bg-primary {
height: 90vh;
position: absolute;
left: 0;
right: -5.5vw;
top: 0;
bottom: 0;
border-bottom: 90vh solid #00ac6a;
background-color: transparent;
z-index: -1;
border-right: 21vh solid transparent;
}

.banner img {
bottom: 0;
position: absolute;
width: 60vw;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 5% 100%;
object-position: 5% 100%;
right: 0;
top: 0;
z-index: -2;
max-width: none;
}

.banner .span6{
position: relative;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 1025px){
.banner .--bg-primary{
border-right: 10vh solid transparent;
transition: border-right .3s;
}
.mobile_cntnt{
display:none;
}
}

@media (max-width: 1024px){
.desktop_cntnt{
display:none;
}
.banner h1 {
font-size: 24px;
text-align: center;
}

.banner ul, .banner p {
font-size: 16px;
margin-bottom: 50px;
text-align: center;
max-width: 400px;
color:#fff;
}

.banner ul li {
font-size: 16px;
text-align: left;
}

.banner .btn_wrpr a {
font-size: 16px;
text-align: center;
}

.banner {
overflow: hidden;
}

.banner img{
width: 70vw;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 31px 87%;
object-position: 31px 87%;
width: 100%;
height: 100%;
transform: scale(1.9);
}

.banner .span6{
width:100%;
}

.banner .span6:last-child {
order: 1;
height: 35vh;
}

.banner .span6:first-child {
order: 2;
}

.banner .--bg-primary {
border-right: 370vh solid transparent!important;
transition: border-right .3s;
border-bottom: 55vh solid #00ac6a;
height: 54vh;
right: 0;
width: 100%!important;
}

.banner .--header-text {
height: 50vh;
align-items: center;
padding-top: 15vw;
padding-left: 0;
}

}

@media (max-width:767px){

.banner .btn_wrpr a {
font-size: 16px;
text-align: center;
}

.banner {
overflow: hidden;
}

.banner img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 31px 87%;
object-position: 31px 87%;
width: 100%;
transform: scale(1.9);
height: 100%;
margin: 0;
}

.banner .--bg-primary {
border-right: 370vh solid transparent;
transition: border-right .3s;
border-bottom: 55vh solid #00ac6a;
height: 54vh;
right: 0;
width: 100%;
}

.banner .--header-text {
height: 50vh;
align-items: center;
padding-top: 15vw;
padding-left: 0;
}

}

@media (max-width:767px) and (max-height:820px){
.banner {
height: auto;
padding-bottom: 20px;
}

.banner .--header-text {
height: auto;
}

.banner .--bg-primary {
height: calc(100% + 20px);
border-bottom: 73vh solid #00ac6a;
}
.banner .--bg-primary{
background: #00AC6A;
}
}

@media (max-width: 500px) {
.banner img {
transform: scale(1.5);
}
}

<div class=“–bg-primary”></div>
</div>
<div class=" span6">
{% if module.image_field.src %}
<img src=“{{ module.image_field.src }}” alt=“{{ module.image_field.alt }}”>
{% endif %}
</div>
</div>
</div>
{% endif %}

7

Hi,
you don’t provide much information regarding your problem, so the most I can give you are some hints that should move you into the right direction:

  1. You should get familiar with CSS as this is the language to change styling and positions. Possible properties to display something next to each other would be display: “flex” or display: “inline”. I really recommend you to gain at least some basic knowledge in CSS. There are tons of guides out there on how to position things by using CSS.
  2. It looks like you are using some CSS framework or library. I assume that by looking on the classes (like “btn_wrpr”) you use in your code. If so, you could have a look into the documentation of this library in order to solve your issue.

Hope this helps.

Best,
Fabian