Canvas Support

Story-Box issue in mobile

1 reply·opened Feb 25, 2020
M
MyBumpFeb 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: 

<div class="content-wrap notoppadding clearfix">

				<div class="container topmargin-lg bottommargin-lg clearfix">

					<div class="divcenter" style="max-width: 960px">
						<div class="heading-block center nobottomborder">
							<h2 class="ls2 t700">Your Priority is our Priority</h2>
							<span>Competently benchmark backward-compatible technologies vis-a-vis
parallel convergence. Rapidiously innovate stand-alone.</span>
						</div>
						<div class="tabs tabs-alt tabs-responsive tabs-justify clearfix" id="tab">

							<ul class="tab-nav clearfix">
								<li><a href="#tabs-1"><i class="icon-line2-key"></i>24x7 Available</a></li>
								<li><a href="#tabs-2"><i class="icon-line2-social-dropbox"></i>Complete Solutions</a></li>
								<li><a href="#tabs-3"><i class="icon-line2-drop"></i>Water Treatments</a></li>
								<li><a href="#tabs-4"><i class="icon-line2-pointer"></i>Location Independant</a></li>
							</ul>

							<div class="tab-container">

								<div class="tab-content clearfix" id="tabs-1">
									<div class="story-box description-left clearfix">
										<div class="story-box-image">
											<img src="demos/bike/images/engagement/1.jpg" alt="story-image">
										</div>
										<div class="story-box-info">
											<h3 class="story-title">We help people to create new Website.</h3>
											<div class="story-box-content">
												<p>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.</p>
												<button class="t300 button noleftmargin button-rounded">Read Canvas's story</button>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-content clearfix" id="tabs-2">
									<div class="story-box clearfix">
										<div class="story-box-image">
											<img src="demos/bike/images/engagement/2.jpg" alt="story-image">
										</div>
										<div class="story-box-info">
											<h3 class="story-title">Get better results tomorrow by reading this post.</h3>
											<div class="story-box-content">
												<p>Progressively streamline future-proof networks rather than virtual channels. Intrinsicly architect performance based products with B2C communities. Appropriately underwhelm integrated information via superior platforms.</p>
												<button class="t300 button noleftmargin button-rounded">Read More</button>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-content clearfix" id="tabs-3">
									<div class="story-box description-left clearfix">
										<div class="story-box-image">
											<img src="demos/bike/images/engagement/3.jpg" alt="story-image">
										</div>
										<div class="story-box-info">
											<h3 class="story-title">TK’s recipe of the week: Guiness beef stew.</h3>
											<div class="story-box-content">
												<p>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.</p>
												<button class="t300 button noleftmargin button-rounded">Read About Me</button>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-content clearfix" id="tabs-4">
									<div class="story-box clearfix">
										<div class="story-box-image">
											<img src="demos/bike/images/engagement/4.jpg" alt="story-image">
										</div>
										<div class="story-box-info">
											<h3 class="story-title">We help people to create new Website.</h3>
											<div class="story-box-content">
												<p>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.</p>
												<a href="#">Read Deanne's story</a>
											</div>
										</div>
									</div>
								</div>

							</div>

						</div>
					</div>

				</div>

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
S
SemiColonWebSTAFFFeb 26, 2020

Hello,

We have just checked out the Online Demos to see if this is an issue with the Original Codes. But everything seems to be working fine which indicates a possibility of an error during customization. Unfortunately, we currently cannot check the Codes manually, so it would be great if you can please provide us with a Live URL so that we can check out the exact issue live and provide you with more assistance on this. Thanks for your Patience.

Additionally, it is recommended to check your Codes for HTML Validation here: https://validator.w3.org/ to detect any invalid codes and then fix them to avoid any unexpected issues.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard