I have the following html template.
I would like to create the following layout:
Find below my current layout:
// Layout
.facet-container #facet_selection {
width: 20%;
padding: 1%;
margin-right: 2%;
}
.page-template-page-facet .facet-container .entry-content {
float: left;
overflow: hidden !important;
width: 74%;
/*width: 960px;*/
}
.page-template-page-facet .facet-container .entry-content-mobile {
display: none;
}
.facet-container .faceted .tr>span>span:first-child {
display: none;
}
/*! Tablet --------- */
#media screen and (max-width: 1024px) {
/*#top-container{width:100%;margin:0;}
#top-container .container{padding:0 .5%;}*/
.page-template-page-facet .site-content,
.page-template-page-facet .sidebar {
max-width: 100%;
}
.page-template-page-facet .facet-container .entry-content,
.facet-container .entry-content {
width: 74%;
}
.page-template-page-facet .facet-container .entry-content .model .one_half {
width: 100%;
}
}
/* 480px iphone landscape */
#media screen and (max-width: 640px) {
.page-template-page-facet .site-content,
.page-template-page-facet .sidebar {
max-width: 100% !important;
}
#masthead {
display: none;
}
.mobile-container {
display: block;
}
.page-template-page-facet .facet-container .entry-content-mobile {
display: block;
}
.page-template-page-facet .facet-container .entry-content-web {
display: none;
}
.facet-container #facet_selection {
width: 100% !important;
padding: 2% 0;
float: none;
margin: 0 auto 15px;
}
.facet-container #facet_selection p,
.facet-container #facet_selection div {
margin-left: 3%;
margin-right: 3%;
}
.page-template-page-facet .facet-container .entry-content,
.facet-container .entry-content {
width: 100%;
float: none;
}
.facet-container .entry-content .header_chart {
display: none;
}
.facet-container .faceted .tr>span {
width: 100% !important;
padding: 0 0 15px;
float: none;
}
.facet-container .faceted .tr>span>span:first-child {
width: 100% !important;
display: inline-block;
background: none repeat scroll 0 0 #949599;
line-height: 26.9472px;
margin: 0 0 15px;
padding: 5px;
text-align: center !important;
color: #fff;
}
.facet-container .faceted .price {
margin-top: 0;
}
.facet-container .faceted .button {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.facet-container .faceted .making ul {
margin-left: 22px;
}
}
#facet_selection {
float: left;
width: 216px;
display: block;
background: #F3F3F4 none repeat scroll 0% 0%;
padding: 10px;
margin-right: 20px;
border: 1px solid #949599;
}
/*
#facet_selection {
width: 260px;
padding: 1%;
margin-right: 2%;
}
*/
#facet_selection .title {
font-size: 17px !important;
}
#facet_selection p {
padding: 0;
margin: 0;
font-weight: bold;
}
// Format specific texts
/*
#facet_selection [data-value|="10"], #facet_selection [data-value|="d0264e01e5513ea88f33355707702db1"], #facet_selection [data-value|="lange-haltbarkeit-und-qualitativ-hochwertige-verarbeitung."], #facet_selection [data-value|="ad162e3abe0b9286599db78d3a9d5178"], #facet_selection [data-value|="badenia"] {
color: #0274BE;
font-weight: bold;
float: left;
}
*/
.entry-content2 {
float: left;
width: 100%;
}
.facetwp-slider-wrap {
padding-top: 15px;
}
.facetwp-counts {
float: left;
margin-right: 50px;
}
.sort_title,
.facetwp-sort {
float: left;
}
.facetwp-sort {
margin-left: 10px;
}
.facetwp-dropdown {
font-size: 12px !important;
}
div.facetwp-template:nth-child>div:nth-child>div:nth-child {
border-bottom: 1px solid darkgray;
}
div.facetwp-template>div>div>div>div>div>img {
width: 150px;
}
.fwpl-layout {
clear: both;
}
<div class="entry-content" itemprop="text">
<div class="facet-container">
<div id="facet_selection">
<p class="title">Brand</p>
<div class="facetwp-facet facetwp-facet-brand facetwp-type-checkboxes" data-name="brand" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(24)</span></div>
<div class="facetwp-checkbox" data-value="test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="aya"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(11)</span></div>
<div class="facetwp-checkbox" data-value="ayn"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(7)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<p class="title">OS</p>
<div class="facetwp-facet facetwp-facet-os facetwp-type-checkboxes" data-name="os" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(48)</span></div>
<div class="facetwp-checkbox" data-value="linux"><span class="facetwp-display-value">Linux</span><span class="facetwp-counter">(23)</span></div>
<div class="facetwp-checkbox" data-value="windows"><span class="facetwp-display-value">Windows</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(13)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<p class="title">Test</p>
<div class="facetwp-facet facetwp-facet-os facetwp-type-checkboxes" data-name="os" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(48)</span></div>
<div class="facetwp-checkbox" data-value="linux"><span class="facetwp-display-value">Linux</span><span class="facetwp-counter">(23)</span></div>
<div class="facetwp-checkbox" data-value="windows"><span class="facetwp-display-value">Windows</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(13)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<button class="sbutton"><strong>Filter zurücksetzen</strong></button>
</div>
</div>
<div class="entry-content2">
<div class="entry-content-web">
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</u>.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>
<span class="sort_title">Elements: </span>
<div class="facetwp-counts">Showing 1–10 of 207 results</div> <span class="sort_title">Sorted by:</span>
<div class="facetwp-sort">
<select class="facetwp-sort-select">
<option value="default">Sort by</option>
<option value="title_asc">Title (A-Z)</option>
<option value="title_desc">Title (Z-A)</option>
<option value="date_desc">Date (Newest)</option>
<option value="date_asc">Date (Oldest)</option>
</select>
</div>
<div class="facetwp-template" data-name="all_consoles">
<div class="fwpl-layout el-hkhimk">
<div class="fwpl-result r1">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Fredmeyer_edit_1.jpg/1920px-Fredmeyer_edit_1.jpg" title="Test 1" alt="Test 1"></div>
<div class="fwpl-item el-3kkecq">Test 1</div>
<div class="fwpl-item el-s0uvqw">Brand 1</div>
<div class="fwpl-item el-73zj5">Category 1</div>
</div>
</div>
</div>
<div class="fwpl-result r2">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r3">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r4">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r5">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
<div class="fwpl-result r6">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
<div class="fwpl-result r7">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r8">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r9">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r10">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
</div>
<style>
.fwpl-layout,
.fwpl-row {
display: grid;
}
.fwpl-layout.el-hkhimk {
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
}
.fwpl-layout.el-hkhimk .fwpl-result {
border-style: solid;
border-color: #c0c0c0;
}
.fwpl-row.el-8cjrpw {
grid-template-columns: 1fr;
}
.fwpl-col.el-1tvcxf {
padding: 10px;
}
</style>
</div>
<div class="facetwp-pager">
<div class="facetwp-pager"><a class="facetwp-page first active" data-page="1">1</a><a class="facetwp-page" data-page="2">2</a><a class="facetwp-page" data-page="3">3</a><a class="facetwp-page dots">…</a><a class="facetwp-page last" data-page="21">21</a><a class="facetwp-page next"
data-page="2">>></a></div>
</div>
</div>
</div>
My problem is that I cannot put the boxes (with the images) next to the filters.
I tried using .fwpl-layout { clear:both; } which buts the boxes below the filters but not next to it.
Any suggestions what I am doing wrong?
I appreciate your replies!
Try adding style to correct selectors.
You are trying to add style width: 74% to entry-content class which is your main wrapper of facet-container and entry-content2 div elements.
Check the code on your local environment and make necessary changes. Code snippet executor is considering media queries due to small width available to run the code snippet over here.
// Layout
.facet-container {
float: left;
width: 20%;
margin-right: 2%;
}
.entry-content2 {
float: left;
overflow: hidden !important;
width: 74%;
}
.page-template-page-facet .facet-container .entry-content-mobile {
display: none;
}
.facet-container .faceted .tr>span>span:first-child {
display: none;
}
/*! Tablet --------- */
#media screen and (max-width: 1024px) {
/*#top-container{width:100%;margin:0;}
#top-container .container{padding:0 .5%;}*/
.page-template-page-facet .site-content,
.page-template-page-facet .sidebar {
max-width: 100%;
}
.page-template-page-facet .facet-container .entry-content,
.facet-container .entry-content {
width: 74%;
}
.page-template-page-facet .facet-container .entry-content .model .one_half {
width: 100%;
}
}
/* 480px iphone landscape */
#media screen and (max-width: 640px) {
.page-template-page-facet .site-content,
.page-template-page-facet .sidebar {
max-width: 100% !important;
}
#masthead {
display: none;
}
.mobile-container {
display: block;
}
.page-template-page-facet .facet-container .entry-content-mobile {
display: block;
}
.page-template-page-facet .facet-container .entry-content-web {
display: none;
}
.facet-container #facet_selection {
width: 100% !important;
padding: 2% 0;
float: none;
margin: 0 auto 15px;
}
.facet-container #facet_selection p,
.facet-container #facet_selection div {
margin-left: 3%;
margin-right: 3%;
}
.page-template-page-facet .facet-container .entry-content,
.facet-container .entry-content {
width: 100%;
float: none;
}
.facet-container .entry-content .header_chart {
display: none;
}
.facet-container .faceted .tr>span {
width: 100% !important;
padding: 0 0 15px;
float: none;
}
.facet-container .faceted .tr>span>span:first-child {
width: 100% !important;
display: inline-block;
background: none repeat scroll 0 0 #949599;
line-height: 26.9472px;
margin: 0 0 15px;
padding: 5px;
text-align: center !important;
color: #fff;
}
.facet-container .faceted .price {
margin-top: 0;
}
.facet-container .faceted .button {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.facet-container .faceted .making ul {
margin-left: 22px;
}
}
#facet_selection {
float: left;
width: 216px;
display: block;
background: #F3F3F4 none repeat scroll 0% 0%;
padding: 10px;
margin-right: 20px;
border: 1px solid #949599;
}
/*
#facet_selection {
width: 260px;
padding: 1%;
margin-right: 2%;
}
*/
#facet_selection .title {
font-size: 17px !important;
}
#facet_selection p {
padding: 0;
margin: 0;
font-weight: bold;
}
// Format specific texts
/*
#facet_selection [data-value|="10"], #facet_selection [data-value|="d0264e01e5513ea88f33355707702db1"], #facet_selection [data-value|="lange-haltbarkeit-und-qualitativ-hochwertige-verarbeitung."], #facet_selection [data-value|="ad162e3abe0b9286599db78d3a9d5178"], #facet_selection [data-value|="badenia"] {
color: #0274BE;
font-weight: bold;
float: left;
}
*/
.entry-content2 {
float: left;
width: 100%;
}
.facetwp-slider-wrap {
padding-top: 15px;
}
.facetwp-counts {
float: left;
margin-right: 50px;
}
.sort_title,
.facetwp-sort {
float: left;
}
.facetwp-sort {
margin-left: 10px;
}
.facetwp-dropdown {
font-size: 12px !important;
}
div.facetwp-template:nth-child>div:nth-child>div:nth-child {
border-bottom: 1px solid darkgray;
}
div.facetwp-template>div>div>div>div>div>img {
width: 150px;
}
.fwpl-layout {
clear: both;
}
.fwpl-layout,
.fwpl-row {
display: grid;
}
.fwpl-layout.el-hkhimk {
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
}
.fwpl-layout.el-hkhimk .fwpl-result {
border-style: solid;
border-color: #c0c0c0;
}
.fwpl-row.el-8cjrpw {
grid-template-columns: 1fr;
}
.fwpl-col.el-1tvcxf {
padding: 10px;
}
<div class="entry-content" itemprop="text">
<div class="facet-container">
<div id="facet_selection">
<p class="title">Brand</p>
<div class="facetwp-facet facetwp-facet-brand facetwp-type-checkboxes" data-name="brand" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(24)</span></div>
<div class="facetwp-checkbox" data-value="test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="aya"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(11)</span></div>
<div class="facetwp-checkbox" data-value="ayn"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(7)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<p class="title">OS</p>
<div class="facetwp-facet facetwp-facet-os facetwp-type-checkboxes" data-name="os" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(48)</span></div>
<div class="facetwp-checkbox" data-value="linux"><span class="facetwp-display-value">Linux</span><span class="facetwp-counter">(23)</span></div>
<div class="facetwp-checkbox" data-value="windows"><span class="facetwp-display-value">Windows</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(13)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<p class="title">Test</p>
<div class="facetwp-facet facetwp-facet-os facetwp-type-checkboxes" data-name="os" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(48)</span></div>
<div class="facetwp-checkbox" data-value="linux"><span class="facetwp-display-value">Linux</span><span class="facetwp-counter">(23)</span></div>
<div class="facetwp-checkbox" data-value="windows"><span class="facetwp-display-value">Windows</span><span class="facetwp-counter">(22)</span></div>
<div class="facetwp-checkbox" data-value="Test"><span class="facetwp-display-value">Test</span><span class="facetwp-counter">(13)</span></div>
<div class="facetwp-overflow facetwp-hidden">
</div><a class="facetwp-toggle">See 5 more</a><a class="facetwp-toggle facetwp-hidden">See less</a></div>
<button class="sbutton"><strong>Filter zurücksetzen</strong></button>
</div>
</div>
<div class="entry-content2">
<div class="entry-content-web">
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</u>.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>
<span class="sort_title">Elements: </span>
<div class="facetwp-counts">Showing 1–10 of 207 results</div> <span class="sort_title">Sorted by:</span>
<div class="facetwp-sort">
<select class="facetwp-sort-select">
<option value="default">Sort by</option>
<option value="title_asc">Title (A-Z)</option>
<option value="title_desc">Title (Z-A)</option>
<option value="date_desc">Date (Newest)</option>
<option value="date_asc">Date (Oldest)</option>
</select>
</div>
<div class="facetwp-template" data-name="all_consoles">
<div class="fwpl-layout el-hkhimk">
<div class="fwpl-result r1">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Fredmeyer_edit_1.jpg/1920px-Fredmeyer_edit_1.jpg" title="Test 1" alt="Test 1"></div>
<div class="fwpl-item el-3kkecq">Test 1</div>
<div class="fwpl-item el-s0uvqw">Brand 1</div>
<div class="fwpl-item el-73zj5">Category 1</div>
</div>
</div>
</div>
<div class="fwpl-result r2">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r3">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r4">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r5">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
<div class="fwpl-result r6">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
<div class="fwpl-result r7">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r8">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r9">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">Test</div>
</div>
</div>
</div>
<div class="fwpl-result r10">
<div class="fwpl-row el-8cjrpw">
<div class="fwpl-col fwpl-col el-1tvcxf">
<div class="fwpl-item el-cnyj7f is-empty"></div>
<div class="fwpl-item el-3kkecq">Test</div>
<div class="fwpl-item el-s0uvqw">Test</div>
<div class="fwpl-item el-73zj5">-</div>
</div>
</div>
</div>
</div>
<style>
.fwpl-layout,
.fwpl-row {
display: grid;
}
.fwpl-layout.el-hkhimk {
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
}
.fwpl-layout.el-hkhimk .fwpl-result {
border-style: solid;
border-color: #c0c0c0;
}
.fwpl-row.el-8cjrpw {
grid-template-columns: 1fr;
}
.fwpl-col.el-1tvcxf {
padding: 10px;
}
</style>
</div>
<div class="facetwp-pager">
<div class="facetwp-pager"><a class="facetwp-page first active" data-page="1">1</a><a class="facetwp-page" data-page="2">2</a><a class="facetwp-page" data-page="3">3</a><a class="facetwp-page dots">…</a><a class="facetwp-page last" data-page="21">21</a><a class="facetwp-page next"
data-page="2">>></a></div>
</div>
</div>
</div>
This is how it looks on my local environment.
Related
I need to center align div content responsively.
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 9px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
width: 40%;
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 20%;
}
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>
How can I center align content of wpwi_inner div so that content will remain center aligned if font size increase or decrease ?
You probably want to look at flexbox. You can tell flexbox children to be centered on either axis with very little effort and browser support is very strong these days.
.flex{
display: flex;
justify-content: center;
}
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 20px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
width: 40%;
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 20%;
}
<div class="flex-container">
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="flex">
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>
</div>
</div>
In the snippet, I enclosed your wpwi_inner within a div that has display: flex. Using the justify-content property we can make children of the flexbox stay centered on the main axis regardless of the size of the content inside.
My Code is like below.
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 9px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
width: 40%;
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 20%;
}
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>
I would like to keep two columns as close as possible without line break and center aligned when font size increase or decrease. I would like to keep like this image when font size is 28px https://i.stack.imgur.com/lYOzI.png and I would like to keep like this image when font size is 9px https://i.stack.imgur.com/89Jc3.png
You can try to unset width: 40% on .wpwi_inner and increase the width of .wpwi_row > div from 20% to 60%.
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 9px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
/* width: 40%; */ /* Removed this */
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 60%; /*Increase this width to 60%*/
}
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>
The desired result should be:
I know CSS, except flex & grid - both of them drive me crazy.
I need a flex container with 2 columns, entire container must be clickable. The container have image on left side and text on right side.
.myflex-container {
display: flex;
flex-direction: row;
font-size: 20px;
text-align: center;
}
.myflex-item-left {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
padding: 0;
flex: 50%;
margin-right: 4%;
margin-bottom: 16px;
}
.myflex-item-right {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
padding: 0;
flex: 50%;
margin-bottom: 16px;
}
img.imgoxauto {
width: 72px;
height: 72px;
}
<div class="myflex-container">
<a href="https://www.example.com/abc">
<div class="myflex-item-left">
<div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London"></div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
</div>
<a href="https://www.example.com/xyz">
<div class="myflex-item-right">
<div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg"></div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
</div>
</div>
Any help would be appreciated.
I found some problems with your markup in terms of opening and closing brackets not matching. Apart from these problems you could approach the styling something like this:
.myflex-container {
display: flex;
flex-direction: row;
font-size: 20px;
text-align: center;
}
.myflex-item-left,
.myflex-item-right {
flex: 50%;
margin: 10px;
}
img.imgoxauto {
height: 100%;
width: 74px;
}
.myprod-image {
height: 74px;
margin-right: 10px;
}
.myflex-item-left > a,
.myflex-item-right > a {
display: flex;
}
.clickable-card {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
}
<div class="myflex-container">
<div class="myflex-item-left">
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/jPGPiJN.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/jPGPiJN.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/jPGPiJN.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
</div>
<div class="myflex-item-right">
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/0MAl65z.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/0MAl65z.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/0MAl65z.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
</div>
</div>
So the main idea is to give the parent flex container flex-direction: row so its children columns are displayed next to each other. Then we want each of these two child columns to have their children (cards) be displayed underneath each other.
Update
From testing out the website you linked the text in the card wasn't aligned in the middle so I added:
.myflex-item-left > a, .myflex-item-right > a {
display: flex;
align-items: center;
}
h5.texth5.myprod-name {
padding-bottom: 0;
}
The padding-bottom: 0 is set to counteract default padding value set by h5 styles.
I didn't understand your code, but here's what you can write instead.
In HTML:
<div class="container">
<div class="image-box">
<img src="your image source here" alt="alt text" />
</div>
<p class="description">Your text goes here</p>
</div>
In CSS:
.container {
width: *any width you want;
height: *any height you want;
display: flex;
align-items: center;
}
.container .image-box {
width: *any width you want;
height: 100%;
margin-right: 10px;
overflow: hidden;
}
.container .image-box img {
height: 100%;
}
.container .description {
*Apply any font styling here
}
You want all of the items in a grid container and then the inner items in a flex container like this.
HTML:
<div class="grid-container">
<div class="flex-container">
<div class="image-box">
<img src="image" alt="image" />
</div>
<h5 class="description">Text</h5>
</div>
<div class="flex-container">
<div class="image-box">
<img src="image" alt="image" />
</div>
<h5 class="description">Text</h5>
</div>
</div>
CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.flex-container {
display: flex;
align-items: center;
}
.image-box {
flex-basis: 20%;
height: 100%;
margin-right: 10px;
overflow: hidden;
}
.image-box img {
height: 100%;
}
h5.description {
flex: 1;
}
I need some help with bootstrap gutter width, I've tried almost everything and still can't make bigger space/padding between triangles with i want to make much bigger. Tried adding classes etc..
here's clean code
Media
#media only screen and (max-width : 1200px) {
/* Team */
.team-item .team-triangle {
width: 90px;
height: 90px;
}
.team-triangle .content {
width: 160px;
height: 160px;
}
.team-hover i {
margin-top: 50px;
}
.team-hover p {
font-size: 14px;
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
/* Team */
.team-item .team-triangle {
width: 120px;
height: 120px;
}
.team-triangle .content {
width: 190px;
height: 190px;
}
.team-hover i {
margin-top: 57px;
}
#team-section .col-md-2:nth-child(7n+5),
#team-section .col-md-2:nth-child(7n+1){
margin-left: 0 !important;
clear: none !important;
}
#team-section .col-md-2 {
float: left;
margin-bottom: 80px;
width: 33.3333%;
}
HTML
div class="container">
<div class="row">
<div class="team-items">
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.2s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title" />
<div class="team-hover text-center">
<a class="overlay" href="#"></a>
<i class="fa fa-male"></i>
<p>Plalalal</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.3s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-female"></i>
<p>Jane Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.4s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.5s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<a class="overlay" href="#"></a>
<div class="team-container wow bounceIn" data-wow-delay="0.6s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ===== Begin team ===== */
.team-item {
height: 130px;
}
.team-item .team-triangle {
width: 130px;
height: 130px;
background: transparent;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 auto;
position: relative;
top: 25px;
box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px #dadbdb;
overflow: hidden;
}
.team-item img {
max-width: 100%;
}
.team-items {
margin-bottom: 50px;
padding-top: 0px;
margin-top: 0;
}
.team-triangle .content {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -35px;
position: absolute;
left: -37px;
width: 190px;
height: 190px;
}
.team-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 103, 109, 117, 0.9);
opacity: 0;
-webkit-transition: opacity 0.4s ease-in; /* For Safari 3.1 to 6.0 */
transition: opacity 0.4s ease-in;
}
.team-item .team-triangle:hover .team-hover {
opacity: 1;
}
.team-hover i {
color: rgba(255, 255, 255,.75);
font-size: 28px;
margin-top: 57px;
position: relative;
}
.team-hover p {
color: #ffffff;
font-size: 16px;
font-weight: 400;
margin-top: 0;
}
.team-items .col-md-2:nth-child(7n+5) {
clear: left;
margin-left: 24.9999999%;
}
.team-items .col-md-2:nth-child(7n+1) {
clear: left;
margin-left: 16.6666666%;
}
/* ===== End team ===== */
Maybe you want something like this.
.large-gutter > [class*='col-'] {
padding-right:50px;
padding-left:50px;
}
HTML
<div class="row large-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
How to I get the two columns to go beside each other. The first one will have text and the 2nd one will be a list. This is the header section and might have a background image. I'm using bootstrap v3.3.4, HTML5 and CSS3
I have attached an image of what I'm trying to accomplish.
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.about-us {
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}
.about-us h2 {
font-size: 650%;
font-weight: 400;
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
}
.about-us .block {
position: relative;
padding: 340px 0px 0px;
z-index: 99;
text-align: center;
}
NEW CODE:
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow- duration="900ms">
<h2>sample</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.about-us {
background-image:linear-gradient(rgba(18, 172, 234, 0.42), rgba(0, 191, 255, 0.55)),url(background-about-header.png);
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}
#about-us h1 {
font-size: 400%;
font-weight: 400;
text-transform: none;
color: #fff;
text-align: justify;
margin: auto;
text-shadow: 2px 2px 1px rgba(56, 56, 56, 0.73);
}
.about-us h2 {
font-size: 750%;
font-weight: 400;
text-transform: uppercase;
color: #fff;
line-height: 80px;
padding-top: 70px;
padding-right: 20%;
margin: auto;
text-shadow: 3px 3px 2px rgba(56, 56, 56, 0.73);
}
#about-us .block {
position: relative;
padding: 205px 0px 0px;
text-align: center;
margin: auto;
}
Media Query
#about-us .block {
padding: 0px;
}
#about-us h1 {
text-align: justify;
margin-left: 20%
}
#about-us h2 {
padding-top: 150px;
padding-bottom: 30px;
margin-left: 10%
}
#media only screen and (max-width: 767px) {
.about-us h1,h2 {
font-size: 16px;
}
display:flex or display:table or display:inline-block can do this :
display:flex
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row,.col-md-6 {
display:inline-flex;
align-items:center;
justify-content:center;
}
.col-md-6 {
flex:1;
padding:1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
& display:table
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row {
display:table;
table-layout:fixed;
}
.col-md-6 {display:table-cell;
vertical-align:middle;
text-align:center;
padding:1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
& display:inline-block
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin: auto;
}
.col-md-6 {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>