Canvas Support

removal of padding for image as specified & Instagram feed appears pixalated

4 replies·opened Jul 10, 2017
O
objetdaJul 10, 2017

Hello Support,

Could you help me on two current issues. I'm wanting to have the images appear to the edge of the nominated box, but if I remove the "col-padding" it throws the alignment out. Here's the code to the relevant area;

<div class="col-md-4 col-sm-6 hidden-xs col-padding">

attachment

</div>

Here's a link to the page (scroll down to just above testimonials) and I've attached an image of the nominated area;

http://www.markitprojects.com.au/WEBDEV/development/investment.html

Also I've included an instagram feed on the page and have put in place the work around to show this, but it appears pixalated on the page where as the instagram page shows the images correctly? Any thoughts on why this is happening.

S
SemiColonWebSTAFFJul 15, 2017

Hello,

  1. For the Column Images, please consider using the following code:
<div class="col-md-4 col-sm-6 hidden-xs nopadding">
	<div>
		<img src="../images/services/inset-1.jpg">
	</div>
</div>
  1. Simply add the data-resolution="standard_resolution" Attribute to the .instagram-photos Element to show good resolution images. Full Setup Instructions can be found in the Documentation > Widgets > Instagram Widget Section.

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.

O
objetdaJul 17, 2017

Thanks for your reply. Yes for Instagram I had over looked the attribute within the tag (thought it went into instagram JS file) so thankyou for clarifying.

In regards to my other matter, I've placed the above code which you recommended into the page replacing what was there but it still throws the page elements out.

I've included a new link for you to view the page with the update and a screen grab at full screen;

http://www.markitprojects.com.au/WEBDEV/development/development170717.html

This link is to the original page and how I would like it to sit but with images filling the nominated boxes;

http://www.markitprojects.com.au/WEBDEV/development/development.html

O
objetdaJul 19, 2017

I’ve included a new link for support to view since we had to go live but still want this rectified.
We tried the recommended code above but it threw the elements out of sync (as per screen shot).

We've reverted back to the original code until we hear from support.

New link for page/section;

http://markitprojects.com.au/development.html#section-services

S
SemiColonWebSTAFFJul 22, 2017

Hello,

Please consider using the following code: 

<div class="common-height clearfix">

	<div class="col-md-3 hidden-xs" style="background: url('images/services/main-bg.jpg') center center no-repeat; background-size: cover;"></div>
	<div class="col-md-9">
		<div class="max-height">
			<div class="row common-height grid-border clearfix">
				<div class="col-md-4 col-sm-6 col-padding">
					<div class="feature-box fbox-plain">
						 <div class="fbox-icon">
							 <a href="#"><i class="icon-et-presentation"></i></a>
						  </div>
						  <h3 class="t400">Great Success</h3>
						  <p>Markit Projects was established in 2006, developing, marketing, planning and selling residential townhouses all over Melbourne and has since enjoyed great success due to clever selection of areas that have been undersupplied but in high demand.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 col-padding">
					<div class="feature-box fbox-plain">
						 <div class="fbox-icon">
							 <a href="#"><i class="icon-et-presentation"></i></a>
						  </div>
						  <h3 class="t400">Market Specialist</h3>
						  <p>Our speciality is medium density residential in high growth suburbs – which led us to develop our own townhouses - numbering more than 100 over the last 10 years as well as sales and marketing of hundreds of townhouses for other developers.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 hidden-xs col-padding" style="background: url('images/services/inset-1.jpg') center center no-repeat; background-size: cover;"></div>
				<div class="col-md-4 col-sm-6 col-padding">
					<div class="feature-box fbox-plain">
						 <div class="fbox-icon">
							 <a href="#"><i class="icon-et-presentation"></i></a>
						  </div>
						  <h3 class="t400">Affordable Solution</h3>
						  <p>Medium density housing provides a practical and affordable solution for residential areas. The value of projects sit between $3.5 million to $15 million end value, with between 2 and 30 dwellings per project.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 col-padding">
					<div class="feature-box fbox-plain">
						 <div class="fbox-icon">
							 <a href="#"><i class="icon-et-presentation"></i></a>
						  </div>
						  <h3 class="t400">Competitive Quality</h3>
						  <p>Our knowledge of the marketplace, the construction process, delivery of high quality finishes, in addition to our network of land developers and tradespeople, enables us to deliver cost competitive quality homes that are built to last.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 hidden-xs col-padding" style="background: url('images/services/inset-2.jpg') center center no-repeat; background-size: cover;"></div>
			</div>
		</div>
	</div>

</div>

This should 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