Question

Two banner widgets 50% width for each one?

  • 22 February 2023
  • 4 replies
  • 38 views
nicksimard
Rank
Userlevel 2
Badge +1

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.

Come check out the Zapier Community (built with inSided) at https://community.zapier.com!

4 replies

revote
Rank
Userlevel 3
Badge +2

I wish to have this option as well!

JeppePeppe
Rank
Userlevel 1

@nicksimard I don’t know if this is what you’re looking for, but I have this that I’ve made before (html widget) which is 2 columns in desktop, and 1 column in mobile view. Should be easy to adjust to 2 columns in mobile view aswell:

 


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>

 

tah-dah
JeppePeppe
Rank
Userlevel 1

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. 😋

tah-dah
nicksimard
Rank
Userlevel 2
Badge +1

@JeppePeppe Awesome! Let me give that last option a try :)

Come check out the Zapier Community (built with inSided) at https://community.zapier.com!

Reply


Terms & ConditionsCookie settings