this class needs to be added to the map div = gmap-wrapper
this class needs to be added to the iframe as a class = scrolloff

CSS

.scrolloff
{ pointer-events: none; }

HTML

<div class="gmap-wrapper">					
	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14695.074973989373!2d72.6236405!3d22.9587424!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4b7d4042cc4ba9d9!2sTankar+Residency%2C+Dibiyapur%2C+Vatva%2C+Ahmedabad%2C+Gujarat+382445!5e0!3m2!1sen!2sin!4v1499159481841" width="600" height="450" frameborder="0" style="border:0"  class="scrolloff"></iframe>
</div>

jQuery

<script type="text/javascript">
// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
	jQuery(document).ready(function( $ ) {
		$('.gmap-wrapper').on('click', function ()
			{ $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click 
		});
		// you want to disable pointer events when the mouse leave the canvas area;
		$(".gmap-wrapper").mouseleave(function (){ 
			$('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area 
		});
	});
</script>

Magento 2 : Add Custom link in header

Posted: October 29, 2016 in Magento

<block class="Magento\Framework\View\Element\Html\Link\Current" name="test" before="-">
	<arguments>
		<argument name="label" xsi:type="string">Test</argument>
		<argument name="path" xsi:type="string">test</argument>
	</arguments>
</block>

Image in PHTML file:

<img src="<?php echo $this->getViewFileUrl('images/facebook.png'); ?>"/>


Image in Static Block:

{{view url="images/demo.jpg"}} 


Image in CMS page:

{{view url="images/demo.jpg"}} 

Call PHTML file In CMS page:

{{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"}} 

Call PHTML file in XML:

<referenceContainer name="footer">                
            <block class="Magento\Framework\View\Element\Template" name="footer.hcontent" template="Magento_Theme::html/footer.phtml">
                <container name="hcontent" label="footer content"/>
            </block>
</referenceContainer>

Text in PHTML file:

<?php echo __('Create Backup') ?>

If your string contains a variable, to add a placeholder for this variable in the dictionary, use syntax similar to the following:

<?php echo sprintf(__('Hello %s'), $yourVariable) ?>

In Phtml File:

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

in CMS Content:

{{block class="Magento\\Cms\\Block\\Block" block_id="block_identifier"}}

In Xml File:

<referenceContainer name="content">
	<block class="Magento\Cms\Block\Block" name="block_identifier">
		<arguments>
			<argument name="block_id" xsi:type="string">block_identifier</argument>
		</arguments>
	</block>
</referenceContainer>

Vertical align in divs

Posted: April 12, 2016 in CSS 3

HTML :

      <div class="vcenter">
           <div class="col-md-4">1</div>
           <div class="col-md-4">2</div>
           <div class="col-md-4">3</div>
      </div>

CSS :

.vcenter {
    align-items: center;
    display: flex;
}

CSS3 triangle shape with link

Posted: November 27, 2015 in CSS 3

HTML

<div class="actions">
	<a href="#" class="button btn-cart">
		<img src="images/demo.png">
	</button>
	<a href="#" class="product-detail">
		<img src="images/demo.png">
	</a>
</div>

CSS

.actions {
    bottom: 0;
    height: 73px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 74px;
}
.actions .button.btn-cart img, 
.actions .product-detail img, 
{
    height: 100%;
    transform-origin: inherit;
    width: 100%;
}
.actions .button.btn-cart {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewX(1.02deg);
    transform-origin: 50% 0 0;
}
.actions .product-detail {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewY(141.02deg);
    transform-origin: 100% 0 0;
}
.actions .product-detail img {
    transform: skewY(38.02deg);
}

Like below :
Capture