Make iframe Responsive Google Map

As you may try to embed google map with iframe and the responsive looks bad cause thw width is static for this we need to fix it by addin div arround the iframe and call it googlemap  the html will be like this


<div class="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3390.682201836445!2d34.658961000000005!3d31.806410000000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502a3146f6f2ff1%3A0x8748af783646c74e!2z15nXnNeT15kg15TXnteZ150g16nXnCDXnNeZ157Xldeo!5e0!3m2!1siw!2sil!4v1440163180181&language=iw" width="700" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

 

and the css will be


.googlemap {
        position: relative;
        padding-bottom: 75%; /* 4:3 ratio*/
        height: 0;
        overflow: hidden;
}

.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

 

this should do the magic

Advertisements

How To Setup Virtual Hosts (Real Domain) Using XAMPP

what i want to do is to use my new domain that i am developing on localhost but in the default way  http://localhost/website but using normal http://www.website.com

The Steps

You need to have XAMPP installed ( 😐 )
Open up the Xampp control panel and stop Apache (Ensure that you don’t have it running as a service … this is where doing so complicates things)
Navigate to C:/xampp/apache/conf/extra or wherever you installed xampp
Fire up your text editor with administrative privileges and open up httpd-vhosts.conf found in the C:/xampp/apache/conf/extra folder
At the very bottom of the file paste the following

<VirtualHost *:80>
 ServerAdmin localhost
 DocumentRoot "F:\xampp\htdocs"
 ServerName localhost
 ErrorLog "logs/dummy-host2.example.com-error.log"
 CustomLog "logs/dummy-host2.example.com-access.log" common
 </VirtualHost>

 

 

With out that line of code you will lose access to your default htdocs directory. IE. http://localhost/ will be inaccessible.

Now copy and paste the code below .. below the first code

 <VirtualHost *:80>
 ServerAdmin limor.com
 DocumentRoot "F:\xampp\htdocs\limor"
 ServerName limor.com
 ErrorLog "logs/dummy-host2.example.com-error.log"
 CustomLog "logs/dummy-host2.example.com-access.log" common
 </VirtualHost>

 

Now we head over to our Windows Hosts File, to edit the HOSTS. the file will be located at C:/Windows/System32/drivers/etc/hosts, where hosts is the file.

127.0.0.1 localhost

look for the line above, and enter your site mimicking the layout

127.0.0.1 localhost
127.0.0.1 http://www.limor.com

change it to reflect the lines above (if you have problems saving it meant you didn’t have your text editor running in admin mode.

Restart Apache and test to make sure it is working

If you have any problems comment if not … give it a like