// Cannot Find with Title in one line - stacked on mobile
.cannot-find-section{
padding: _res-m(130) _res-m(121);
@include screen-sm-min{
padding: _res(52) 0;
>.ari-row{
@include _flex($halign: space-between);
&::before, &::after{
display: none;
}
}
.cannot-find-search{
width: 80%;
}
}
@include section-padding;
}
.cannot-find-title{
margin-bottom: _res-m(63);
@include screen-sm-min{
margin-bottom: 0;
width: 20%;
}
.title{
color: $brand-secondary;
font-family: $headings-font-family;
font-weight: normal;
font-size: _res-m(74);
text-align: center;
line-height: 1.2;
@include screen-sm-min{
font-size: _res(38);
text-align: left;
}
}
}
.cannot-find-search{
.Advanced-Inventory-Search_1-0-2{
.advanced-inventory-search.collapse-never{
padding: 0;
.row-flex{
@include screen-xs{
flex-direction: column;
gap: _res-m(63);
}
@include screen-sm-min{
flex-wrap: nowrap;
gap: _res(27);
}
.column-auto.collapse{
padding: 0;
@include screen-xs{
width: 100% !important;
}
select{
border: none;
height: _res-m(128);
font-size: _res-m(33);
margin: 0;
padding: 0 _res-m(47);
@include screen-sm-min{
height: _res(31,54);
font-size: _res(10,14);
padding: 0 _res(20);
}
}
&.column-btn{
#viewResults{
@include btn-style;
width: 100%;
font-size: 0;
&::before{
content: "Search";
font-size: _res-m(30);
}
@include screen-sm-min{
font-size: 0;
&::before{
font-size: _res(10,18);
}
}
}
}
&:nth-child(5), &:last-child{
display: none !important;
}
}
}
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter