MMyBumpFeb 25, 2020
Tried to replicate the story-box using the html and css from demo interior design (http://themes.semicolonweb.com/html/canvas/demo-interior-design.html) for our own website. Everything works well in desktop, but when in mobile the tabs get repeated and have to click twice to view the tab content. I have attached screenshots.
What am I missing? Please help.
HTML:
Your Priority is our Priority
Competently benchmark backward-compatible technologies vis-a-vis
parallel convergence. Rapidiously innovate stand-alone.
- [24x7 Available](#tabs-1)
- [Complete Solutions](#tabs-2)
- [Water Treatments](#tabs-3)
- [Location Independant](#tabs-4)
We help people to create new Website.
Uniquely productize cross-unit action items with multifunctional imperatives. Quickly communicate collaborative relationships rather than timely materials. Progressively foster unique interfaces vis-a-vis backend e-services.
Read Canvas's story
Get better results tomorrow by reading this post.
Progressively streamline future-proof networks rather than virtual channels. Intrinsicly architect performance based products with B2C communities. Appropriately underwhelm integrated information via superior platforms.
Read More
TK’s recipe of the week: Guiness beef stew.
Compellingly synthesize technically sound users without technically sound vortals. Rapidiously redefine maintainable leadership with multifunctional strategic theme areas. Appropriately plagiarize business ideas vis-a-vis.
Read About Me
We help people to create new Website.
Dynamically exploit cross-platform sources vis-a-vis scalable paradigms. Efficiently plagiarize multifunctional internal or "organic" sources before intuitive innovation. Synergistically facilitate goal-oriented ROI vis-a-vis client-focused.
[Read Deanne's story](#)
CSS:
/* ----- | Story-Box | ----- */
.story-box {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
cursor: pointer;
}
.story-box .story-box-image {
width: 70%;
height: 500px;
z-index: 2;
overflow: hidden;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.story-box .story-box-image img {
display: block;
height: auto;
width: 100%;
opacity: 1;
transition: opacity .3s ease;
}
.story-box:hover .story-box-image img {
opacity: .9;
}
.story-box .story-box-info {
box-sizing: border-box;
width: 50%;
height: 430px;
padding: 60px;
margin: 35px 0 0 -20%;
background: #fff;
z-index: 4;
box-shadow: 0 10px 45px rgba(0,0,0,.1);
transition: all ease-in .3s;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.story-box.description-left .story-box-info {
-ms-flex-order: -1;
order: -1;
margin: 35px -20% 0 0;
}
.story-box .story-box-info .story-title {
font-family: 'Playfair Display';
font-size: 26px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0;
color: #1d2c4c;
}
.story-box .story-box-info .story-box-content p {
font-size: 15px;
font-weight: 300;
color: #666;
line-height: 16px;
}
.story-box .story-box-info .story-box-content a {
font-size: 16px;
text-decoration: underline !important;
}
/* ----- Story-Box Responsive ----- */
@media (max-width: 991px) {
.story-box .story-box-image {
height: auto;
width: 100%;
height: 400px;
-ms-flex-order: -1;
order: -1;
}
.story-box.description-left .story-box-info {
-ms-flex-order: -1;
order: -1;
margin: 35px -20% 0 0;
}
.story-box.description-left .story-box-info { margin: -40px 5% 0; }
.story-box .story-box-info {
max-width: 90%;
height: auto;
-ms-flex-preferred-size: 90%;
flex-basis: 90%;
margin: -40px 5% 0;
}
#side-panel-trigger { right: 40px !important; }
.mobile-side-panel {
position: absolute;
display: block;
top: 26px;
font-size: 18px;
color: #222;
right: 40px;
padding: 10px;
}
}
@media (max-width: 767px) {
.story-box.description-left .story-box-info { margin: -100px 5% 0; }
.story-box .story-box-info {
padding: 35px;
text-align: center;
margin: -100px 5% 0;
}
.customers-count { border-right: none }
}
@media (max-width: 479px) {
.story-box .story-box-info {
width: 100%;
padding: 15px;
text-align: center;
margin: -200px 5% 0;
}
.story-box.description-left .story-box-info { margin: -200px 5% 0; }
ul.tab-nav:not(.tab-nav-lg) li a i {display: none;}
}
/* ----- Tab ----- */
ul.tab-nav:not(.tab-nav-lg) { border-bottom: none; }
ul.tab-nav:not(.tab-nav-lg) li {
float: left;
border: none;
height: auto;
text-align: center;
}
.tabs.tabs-alt ul.tab-nav li.ui-tabs-active a { border: none; }
ul.tab-nav:not(.tab-nav-lg) li a {
color: #1d2c4c;
height: auto;
line-height: 1;
background-color: transparent;
font-size: 15px;
font-weight: 400;
padding: 0 0 20px 0;
}
ul.tab-nav:not(.tab-nav-lg) li a i {
display: block;
font-size: 42px;
margin: 0 0 17px 0;
color: var(--themecolor);
}
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a { top: 0; }
ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a:after {
content: '';
position: absolute;
width: 6px;
height: 6px;
bottom: 0;
left: 50%;
margin-left: -3px;
border-radius: 50%;
background: var(--themecolor);
}
.tab-container { margin: 30px 0 0; }
/* ----- Tab Responsive ----- */
.acctitle {
line-height: 30px;
font-size: 16px;
font-weight: 500;
color: #444;
border-top: 1px dotted #DDD;
padding: 12px 0 12px 24px;
}
.acc_content { padding: 10px 0 25px; }
.acctitle i {
color: var(--themecolor);
font-size: 16px;
top: 3px;
}
.acctitle i.icon-ok-circle,
.acctitle i.icon-remove-circle { display: none; }
Using footer script: 'functions.js'
The story-box gets broken when I include: jquery.js & plugins.js