Home Forums Porto Template Finace demo: position of the custom-venue-address

This topic contains 12 replies, has 2 voices, and was last updated by  ppericles 4 months, 3 weeks ago. This post has been viewed 312 times

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #10020590

    ppericles
    Participant

    Hello,
    I have defined a custom css entity custom-venue-address (like you have done in the demo event template).
    I wish to position the custom-venue-address div underneath the page header without any gap between them (as shown in picture https://www.dropbox.com/s/ce3tp35hiyet4vq/Capture0.PNG?dl=0).
    But what I am getting is with the gap between them.
    In IE I get https://www.dropbox.com/s/hekafp78wm3gcge/Capture1.PNG?dl=0.
    In Chrome I get a mess as shown in https://www.dropbox.com/s/mi95yeib363q70z/Capture.PNG?dl=0.

    Can you help?
    Thanks,
    Pericles



    Template Version: 5.7
    #10020599

    Support2
    Keymaster

    Hello,

    i am inspecting your website now and saw that you already soved this issue, right ?

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


    #10020603

    ppericles
    Participant

    Hello,
    I took a different approach, but still facing some other problems.
    1. When the page is resized, temporarily the custom address overlaps the page header, as shown in https://www.dropbox.com/s/hekafp78wm3gcge/Capture1.PNG?dl=0
    2. I added an attachment field in the contact us form, which does not display correctly in IE11, as shown in https://www.dropbox.com/s/mi95yeib363q70z/Capture.PNG?dl=0
    3. I wish to reduce the top margin of the #footer so that there is less white space.

    Best regards,
    Pericles


    #10020610

    Support2
    Keymaster

    Hello,

    1) My suggestion to you is to set a position relative on .main and set a position absolute on #venue section. And remove the class page-header-no-margin from the page header. Like this code below:

    .main {
    	position: relative;
    }
    
    #venue {
    	position: absolute;
            width: 100%;
            top: 70px;
    }

    2) In css/custom.css add this code:

    html.ie .custom-form-style .form-control-custom .form-control {
        padding: 1px 10px 5px 30px;
    }

    3) In css/custom.css add this code:

    #footer {
    	padding: 20px 0 0;
    }

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10020611

    ppericles
    Participant

    Hi,
    Thanks for the help.
    But for 1) it still has problems. See picture https://www.dropbox.com/s/mi95yeib363q70z/Capture.PNG?dl=0

    Thanks,
    Pericles


    #10020612

    Support2
    Keymaster

    Hello,

    1) Add the class m-none on page-header element (to remove all margins).

    2) I modified your custom css, so please replace all your code from css/custom.css to this new on link below:
    https://pastebin.com/raw/f1HSFEjT

    * Added the styles mentioned on my first solution in my last post on step 1.
    * I increased the height of maps to 650px.
    * Added some @media queries to change the position of bottom arrow (from box with address) depending the resolution.

    Kind Regards,

    Rodrigo.


    • This reply was modified 5 months ago by  Support2.
    #10020614

    ppericles
    Participant

    Hello,
    Thanks for your reply.
    There is one thing left to fix. When displaying the page in smaller size the custom-contact-address panel gets resized to a larger width, which results in losing the center of the map-pin, as shown in picture https://www.dropbox.com/s/mi95yeib363q70z/Capture.PNG?dl=0

    Pericles


    #10020636

    Support2
    Keymaster

    Hello,

    We can control the position of down arrow of address box using CSS media queries.
    Try to add this code below in css/custom.css, from the line 118 of this file.

    @media (max-width: 767px) {
    	.custom-arrow {
    	    left: 47vw;
    	}
    }
    
    @media (max-width: 500px) {
    	.custom-arrow {
    	    left: 50vw;
    	}
    }
    
    @media (max-width: 380px) {
    	.custom-arrow {
    	    left: 53vw;
    	}
    }

    * “vw” is based on View Port of browser.

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10020637

    ppericles
    Participant

    Hello,
    Thanks.
    The changes fix the horizontal position of the white arrow, but not the vertical.

    Thanks,
    Pericles


    #10020648

    Support2
    Keymaster

    Hello,

    For adjust the position on vertical (connecting the map pin with box down arrow), you need to increase the min-height: 650px from google maps on file custom.css. Increasing the min-height of map, the pin of map will move for down. But use @media queries to make this only on resolutions where that is needed.

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 4 months, 4 weeks ago by  Support2.
    #10020679

    ppericles
    Participant

    Thanks for the answer.
    My code will get messy if I apply this change.
    Could you please help me implement the customer address panel within google maps infowindow class?

    Thanks,
    Pericles


    #10020690

    Support2
    Keymaster

    Hello,

    to add the code inside InfoWindow, you need to add all HTML code in html: option (on footer of page). Like this code below:

    // Map Markers
    var mapMarkers = [{
    	address: "New York, NY 10017",
    	html: '<section id="venue" class="pt-xlg">'+
    		'<div class="container pt-xlg mt-xlg">'+
    			'<div class="row pt-sm mb-md">'+
    				'<div class="col-md-12">'+
    					'<h2 class="text-color-dark text-uppercase font-weight-bold center mb-xs">Venue</h2>'+
    					'<p class="custom-font-size-1 center mb-sm">Check out the Venue Information</p>'+
    				'</div>'+
    			'</div>'+
    			'<div class="row">'+
    				'<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">'+
    					'<div class="row">'+
    						'<div class="custom-venue-address background-color-light">'+
    							'<div class="col-xs-6 hidden-xs p-none" style="background-image: url("img/demos/event/venue/venue-img.jpg")"></div>'+
    							'<div class="col-xs-6 p-xlg">'+
    								'<div class="p-sm">'+
    									'<div class="text-color-dark font-weight-bold text-uppercase mb-md">New York Plazha</div>'+
    									'<p class="font-weight-normal mb-none"><strong>Address:</strong> 1234, Street, City Name, United States</p>'+
    									'<p class="font-weight-normal mb-xlg">'+
    										'<strong>Phone:</strong>'+
    										'<a href="tel:+123456789" class="custom-text-color-def">'+
    											'(123) 456-789'+
    										'</a>'+
    									'</p>'+
    									'<a href="http://maps.google.com" target="_blank" class="btn btn-primary custom-border-radius custom-btn-style-1 font-size-md font-weight-semibold text-color-light text-uppercase outline-none">Get Direction <i class="custom-long-arrow-right" aria-hidden="true"></i></a>'+
    								'</div>'+
    							'</div>'+
    							'<span class="custom-arrow background-color-light"></span>'+
    						'</div>'+
    					'</div>'+
    				'</div>'+
    			'</div>'+
    		'</div>'+
    	'</section>',
    	icon: {
    		image: "img/demos/finance/map-pin.png",
    		iconsize: [88, 58],
    		iconanchor: [88, 58]
    	}
    }];

    Probably you need to made some CSS changes to style inside that InfoWindow.
    Please note that it’s a feature not included on Porto HTML, and to make this needs a lot of time. So we can not send to you the CSS code to style the customer address inside InfoWindow, because we don’t have this feature ready on Porto.

    Kind Regards,

    Rodrigo.


    #10020770

    ppericles
    Participant

    Thanks.

    Pericles


Viewing 13 posts - 1 through 13 (of 13 total)