Canvas Support

Column Order / Media Query

2 replies·opened Mar 21, 2017
M
mweslosky15Mar 21, 2017

On this page - http://themes.semicolonweb.com/html/canvas/demo-app-landing.php, under the slider there are two graphics with text that fly in. The second one that has the text on the left and the graphic on the right, when this screen goes responsive the graphic on the right stacks under the text on the left. I understand that 99% of the time the right column is always stacked under the left column. However, in this instance it looks funny to have the text appear on the top with the graphic below it. Is there a way to have the right column with the graphic stack ON TOP of the left column when the screen goes responsive?

I appreciate your help.

M
mweslosky15Mar 23, 2017

Hello - I need some feedback on this please.

S
SemiColonWebSTAFFMar 29, 2017

Hello,

We Apologize about the Delays and Really Appreciate your Patience with us!

We completely agree with on this. Consider replacing the particular section's code with the following code: 

<div id="section-stunning-graphics" class="page-section topmargin bottommargin-lg">
	<div class="row clearfix">

		<div class="col-md-7 hidden-md hidden-lg bottommargin-sm center">
			<img src="demos/app-landing/images/section/iphone-nexus.png" alt="Stunning Graphics" data-animate="fadeInRight">
		</div>

		<div class="col-md-5">
			<div class="topmargin-lg hidden-xs hidden-sm"></div>
			<img src="demos/app-landing/images/section/section-2-icon.png" alt="" style="display: block;" class="bottommargin-sm">
			<div class="emphasis-title bottommargin-sm">
				<span class="before-heading">Retina Ready &#x7E; 534 PPI</span>
				<h2 style="font-size: 42px;" class="font-body ls1 t400">Stunning Graphics</h2>
			</div>
			<p style="color: #777;" class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, vel! Eius pariatur nemo expedita.</p>
			<a href="#" class="section-more-link">Learn More <i class="icon-angle-right"></i></a>
		</div>

		<div class="col-md-7 visible-md visible-lg center">
			<img src="demos/app-landing/images/section/iphone-nexus.png" alt="Stunning Graphics" data-animate="fadeInRight">
		</div>

	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

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