I feel like this shouldn’t be too tricky but I can’t seem to crack it. We’d like to use the banner widget, with title on top and image on bottom, but have two of them side-by-side. So two banners, each taking up 50% of the width.
I’m comfortable using an HTML widget and some CSS, but I can’t seem to figure out the CSS to achieve this. Would appreciate any help!
Ideally, this would be responsive as well, but I can tinker with that part if need be.
I wish to have this option as well!
Here is the code:
(Some SVG-icons which makes this look like a giant mess)
<div class="sitewidth">
<div class="home-op-grid home-op-mb-6">
<a class="home-op-card community-box-shadow" href="https://community.tre.se/topic/new?fid=null">
<div class="home-content-icon-container">
<svg class="home-content-icon" viewbox="0 0 40 40">
<path class="pen--icon" d="M33.48715,1.90501C30.60968-.97295,28.24784,.24952,28.14923,.30358c-.07459,.04005-.14267,.09111-.20274,.15068L1.24436,27.15688c-.13316,.13316-.21976,.30537-.2463,.49259L.00888,34.55178c-.03905,.27133,.05206,.54566,.2463,.73889,.1647,.1652,.38697,.25531,.61624,.25531,.04105,0,.0826-.002,.12365-.00801l6.54187-.93813c.18672-.02703,.35943-.11314,.49259-.2473L34.93789,7.44567c.05957-.06007,.11063-.12815,.15068-.20274,.05356-.09912,1.27603-2.46096-1.60143-5.33792ZM7.00229,32.91581l-5.10314,.73188,.78294-5.46457L24.03922,6.82637l4.52644,4.52644L7.00229,32.91581ZM33.58126,6.33734l-3.78311,3.78299-4.52644-4.52644,3.78311-3.78299c.34291-.11013,1.55587-.31788,3.19985,1.3266,1.64448,1.64398,1.43523,2.85594,1.3266,3.19985Z"></path></svg>
</div>
<div class="home-op-card-body">
<h2 class="home-op-card-title">Skapa ämne</h2>
<p class="home-op-card-text">Ställ en fråga eller starta en diskussion.</p>
</div></a> <a class="home-op-card community-box-shadow" href="https://community.tre.se/knowledge-base">
<div class="home-content-icon-container">
<svg class="home-content-icon" viewbox="0 0 40 40">
<path d="M1 3C1.552 3 2 3.448 2 4L2 35.765C2 36.334 2.262 37 3 37L27 37C27.738 37 28 36.334 28 35.765L28 4C28 3.448 28.448 3 29 3C29.552 3 30 3.448 30 4L30 35.765C30 37.639 28.738 39 27 39L3 39C1.262 39 1.18982e-07 37.639 2.82813e-07 35.765L3.0598e-06 4C3.10805e-06 3.448 0.448003 3 1 3Z"></path>
<path d="M29 36C28.448 36 28 35.552 28 35V3.235C28 2.666 27.738 2 27 2H3C2.262 2 2 2.666 2 3.235V35C2 35.552 1.552 36 1 36C0.448 36 0 35.552 0 35V3.235C0 1.361 1.262 0 3 0H27C28.738 0 30 1.361 30 3.235V35C30 35.552 29.552 36 29 36Z"></path>
<path d="M24 21H6C5.448 21 5 20.552 5 20C5 19.448 5.448 19 6 19H24C24.552 19 25 19.448 25 20C25 20.552 24.552 21 24 21Z"></path>
<path d="M24 16H6C5.448 16 5 15.552 5 15C5 14.448 5.448 14 6 14H24C24.552 14 25 14.448 25 15C25 15.552 24.552 16 24 16Z"></path>
<path d="M24 26H6C5.448 26 5 25.552 5 25C5 24.448 5.448 24 6 24H24C24.552 24 25 24.448 25 25C25 25.552 24.552 26 24 26Z"></path>
<path d="M15 31H6C5.448 31 5 30.552 5 30C5 29.448 5.448 29 6 29H15C15.552 29 16 29.448 16 30C16 30.552 15.552 31 15 31Z"></path></svg>
</div>
<div class="home-op-card-body">
<h2 class="home-op-card-title">Hjälpcenter</h2>
<p class="home-op-card-text">Artiklar och guider skrivna av Tre.</p>
</div></a> <a class="home-op-card community-box-shadow" href="https://community.tre.se/groups">
<div class="home-content-icon-container">
<svg class="home-content-icon" viewbox="0 0 40 40">
<path d="M32.902 15.358a4.151 4.151 0 00-.13-.137L23.48 5.928a1.993 1.993 0 00-1.414-.585c-.512 0-1.024.195-1.414.585l-4.793 4.793a1.148 1.148 0 01-1.586 0 1.125 1.125 0 010-1.586l4.361-4.36c3.251-3.252 8.336-3.705 11.831-1.052 3.645 2.768 4.62 7.78 2.438 11.635m-1.544 3.863a1.83 1.83 0 01-2.586 0l-1-1-4-4a1 1 0 00-1.414 1.414l4 4 1 1a1.83 1.83 0 010 2.586 1.83 1.83 0 01-2.586 0l-1-1-4-4a1 1 0 00-1.414 1.414l4 4 1 1c.687.687.705 1.785.07 2.501a3.715 3.715 0 00-.656-.915 3.804 3.804 0 00-2.898-1.1 3.81 3.81 0 00-1.102-2.9 3.804 3.804 0 00-2.898-1.1 3.81 3.81 0 00-1.102-2.9 3.804 3.804 0 00-2.898-1.1 3.81 3.81 0 00-1.102-2.9 3.832 3.832 0 00-5.414 0l-1.814 1.815C1.15 12.502 1.571 7.694 4.63 4.636c3.27-3.27 8.45-3.49 11.98-.666l-3.752 3.751a3.125 3.125 0 000 4.414c1.178 1.18 3.236 1.18 4.414 0l4.793-4.793 9.293 9.293a1.83 1.83 0 010 2.586m-10 11l-2 2a1.83 1.83 0 01-2.586 0 1.83 1.83 0 010-2.586l2-2a1.825 1.825 0 011.293-.534c.468 0 .937.178 1.293.534a1.83 1.83 0 010 2.586m-8.586-2a1.83 1.83 0 010-2.586l2-2a1.825 1.825 0 011.293-.534c.468 0 .937.178 1.293.534a1.83 1.83 0 010 2.586l-2 2a1.83 1.83 0 01-2.586 0m-4-4a1.83 1.83 0 010-2.586l2-2a1.825 1.825 0 011.293-.534c.468 0 .937.178 1.293.534a1.83 1.83 0 010 2.586l-2 2a1.83 1.83 0 01-2.586 0m-4-4a1.83 1.83 0 010-2.586l2-2a1.825 1.825 0 011.293-.534c.468 0 .937.178 1.293.534a1.83 1.83 0 010 2.586l-2 2a1.83 1.83 0 01-2.586 0m26.901-18.09c-3.989-3.029-9.643-2.777-13.596.46A10.917 10.917 0 0010.994 0a10.931 10.931 0 00-7.779 3.22c-3.896 3.898-4.3 10.125-.942 14.484.04.052.1.077.146.118-.394 1.307-.092 2.781.94 3.812a3.814 3.814 0 002.706 1.12c.065 0 .127-.015.191-.018a3.806 3.806 0 003.81 4.018c.064 0 .126-.015.19-.018a3.806 3.806 0 003.81 4.018c.064 0 .126-.015.19-.018a3.806 3.806 0 003.81 4.018c.98 0 1.96-.373 2.706-1.12l2-2a3.789 3.789 0 001.085-2.346c.331-.177.645-.383.915-.654a3.806 3.806 0 001.102-2.898c.064.003.127.018.191.018a3.806 3.806 0 003.809-4.018c.064.003.127.018.191.018.981 0 1.961-.373 2.707-1.12a3.82 3.82 0 001.1-3.112c3.618-4.819 2.633-11.722-2.2-15.392"></path></svg>
</div>
<div class="home-op-card-body">
<h2 class="home-op-card-title">Grupper</h2>
<p class="home-op-card-text">Delta i roliga ämnen och aktiviteter.</p>
</div></a> <a class="home-op-card community-box-shadow" href="https://community.tre.se/ideas">
<div class="home-content-icon-container">
<svg class="home-content-icon" viewbox="0 0 25 25">
<path d="M16 12c-.667.667-1 2-1 4v1H9v-1c0-2-.333-3.333-1-4-2.326-2.326-2.586-5.9-.243-8.243a6 6 0 018.486 0C18.586 6.101 18.407 9.593 16 12zm-6 9h4"></path></svg>
</div>
<div class="home-op-card-body">
<h2 class="home-op-card-title">Tipslådan</h2>
<p class="home-op-card-text">Skapa en idé och gör Tre bättre!</p>
</div></a>
</div>
</div>
<style>
.home-op-grid {
padding: 0 10px;
width: 100%;
}
.home-op-card {
display: flex;
width: 100%;
height: 100px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
padding-bottom: 10px;
padding-top: 15px;
padding-left: 20px;
padding-right 20px;
}
.home-content-icon-container {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
margin-right: 20px;
}
.home-content-icon {
height: 50px;
}
.pen--icon {
}
.home-op-card-title {
font-size: 25px;
padding-bottom: 5px;
color: #ff5c00;
}
.home-op-card-text {
margin-top: -5px;
padding-right: 20px;
font-size: 16px;
color: #000;
}
.home-op-card-link-icon {
height: 30px;
padding-right: 5px;
}
.home-op-btn-breakout.home-op-card-link {
display: flex;
font-size: 16px;
text-decoration: underline;
color: #000;
padding-top: 5px;
}
.home-op-grid {
display: grid;
grid-gap: 15px 15px;
width: 100%;
}
@media only screen and (max-width: 768px) {
.home-op-grid {
padding: 0 15px;
}
.home-op-grid {
grid-template-columns: 1fr;
}
.home-op-card-title {
font-size: 20px;
}
.home-content-icon-container {
display: flex;
}
}
@media all and (min-width: 450px) {
.home-op-grid {
grid-template-columns: 1fr;
}
}
@media all and (min-width: 600px) {
.home-op-grid {
grid-template-columns: 1fr 1fr;
}
}
</style>
Also found another widget i made, and i think this is the best way to go about it.
Make a container with the to widgets you want to be displayed next to eachother. Give that container:
.container {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
}The “repeat(2” sets it to 2 columns if I understand it right. 
If you ever had a profile with us, there's no need to create another one.
Don't worry if your email address has since changed, or you can't remember your login, just let us know at community@gainsight.com and we'll help you get started from where you left.
Else, please continue with the registration below.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.