Canvas Support

controlling media boxes in demo-pet.html

4 replies·opened Mar 14, 2019
J
jd_in_sbMar 14, 2019

I am building my site with media boxes as demonstrated in demo-pet.html. Specifically, I am copying the top 4 media boxes (Adopt a Dog, Pet Nutritionists, Find a pet Sitter, Health & Well-being). The demo-pet.html example does not use any portfolio code for those top 4 boxes.

I am trying to limit the number of columns to a minimum of 2 in portrait mobile, but all the tech support articles that I could find talk apply to the portfolio class, which the top 4 media boxes in demo-pet.html doesn't use.

How can I make the top 4 media boxes on demo-pet.html be displayed in 2 columns on portrait mobile? Right now portrait mobile is displays 1 column of four boxes.

I would also like to use hash filtering with the above media boxes, but again, the tech support database just shows how to do it with the portfolio class, and the top 4 media boxes in demo-pet.html don't use the portfolio class.

J
jd_in_sbMar 14, 2019

I love your ability to filter portfolio items as demonstrated in:

portfolio-hash-filter.html

Is it possible to filter Feature Boxes in a similar way? For example the top 4 Feature Boxes (Adopt a Dog, Pet Nutritionists, Find a pet Sitter, Health & Well-being) in:

demo-pet.html

J
jd_in_sbMar 15, 2019

I finally found the solution. I need to built a portfolio structure and insert the Pet demo feature boxes code within the portfolio structure.

J
jd_in_sbMar 15, 2019

I found part of the solution. I need to built a portfolio structure and insert the Pet demo feature boxes code within the portfolio structure.

Not sure yet how to limit a portfolio to displaying 2 columns on mobile portrait. Right now it always shows portfolio in a single column on mobile portrait.

S
SemiColonWebSTAFFMar 18, 2019

Hello,

This is Definitely Possible and can be used using the .grid-container Element. You do not need to use the Portfolio Container. Simply consider using the following code: 

<ul class="portfolio-filter clearfix" data-container="#container-filter">

	<li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
	<li><a href="#" data-filter=".filter-1">Filter 1</a></li>
	<li><a href="#" data-filter=".filter-2">Filter 2</a></li>
	<li><a href="#" data-filter=".filter-3">Filter 3</a></li>
	<li><a href="#" data-filter=".filter-4">Filter 4</a></li>

</ul>

<div class="clear"></div>

<div id="container-filter" class="row grid-container">

	<div class="col-md-3 col-sm-4 col-6 filter-1 filter-3 bottommargin-sm">
		<div class="feature-box media-box fbox-bg">
			<div class="fbox-media">
				<a href="#"><img class="image_fade" src="demos/pet/images/services/1.jpg" alt="Featured Box Image"></a>
			</div>
			<div class="fbox-desc noborder">
				<h3 class="nott ls0 t600">Adopt a Dog<span class="subtitle t300 ls0">Globally parallel task premium infomediaries</span></h3>
				<a href="#" class="button-link noborder color">Read More</a>
			</div>
		</div>
	</div>

	<div class="col-md-3 col-sm-4 col-6 filter-2 filter-4 bottommargin-sm">
		<div class="feature-box media-box fbox-bg">
			<div class="fbox-media">
				<a href="#"><img class="image_fade" src="demos/pet/images/services/2.jpg" alt="Featured Box Image"></a>
			</div>
			<div class="fbox-desc noborder">
				<h3 class="nott ls0 t600">Pet Nutritionists<span class="subtitle t300 ls0">Energistically visualize market-driven.</span></h3>
				<a href="#" class="button-link noborder color">Read More</a>
			</div>
		</div>
	</div>

	<div class="col-md-3 col-sm-4 col-6 filter-3 filter-2 bottommargin-sm">
		<div class="feature-box media-box fbox-bg">
			<div class="fbox-media">
				<a href="#"><img class="image_fade" src="demos/pet/images/services/3.jpg" alt="Featured Box Image"></a>
			</div>
			<div class="fbox-desc noborder">
				<h3 class="nott ls0 t600">Find a pet Sitter<span class="subtitle t300 ls0">Enthusiastically iterate enabled portals after.</span></h3>
				<a href="#" class="button-link noborder color">Read More</a>
			</div>
		</div>
	</div>

	<div class="col-md-3 col-sm-4 col-6 filter-4 filter-1 bottommargin-sm">
		<div class="feature-box media-box fbox-bg">
			<div class="fbox-media">
				<a href="#"><img class="image_fade" src="demos/pet/images/services/4.jpg" alt="Featured Box Image"></a>
			</div>
			<div class="fbox-desc noborder">
				<h3 class="nott ls0 t600">Health &amp; Well-being<span class="subtitle t300 ls0">Enthusiastically iterate enabled portals after.</span></h3>
				<a href="#" class="button-link noborder color">Read More</a>
			</div>
		</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