Canvas Support

image responsiveness and contact form and google map

13 replies · opened Sep 13, 2017

LlenorasSep 13, 2017

How can I format the images on the “about us” page layout to actually respond correctly on a mobile device. The images of the individual person are really big on a mobile device and not shrinking like the slider images or the homepage images for example. I want all the images to shrink to fit, but they don’t. Also, I can’t get the contact us map to load online. When I'm offline it is showing correctly. I also can't get the form to submit. It's just spinning and never submitting.

SSemicolon WebSTAFFSep 19, 2017

Hello,

  1. Consider adding a Custom Class to the Team Image Area in the .common-height Element and then add the max-height CSS Property targeting only on Small Devices to make this work. Eg. Use the following HTML Code:

    

    
        ...

and then use the following CSS Code: 

.device-xs .common-height-team-image { max-height: 300px; }

.device-xxs .common-height-team-image { max-height: 250px; }

This will definitely work fine. Hope this Helps!

  1. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Let us know if we can help you with anything else or if you find any further issues.

LlenorasSep 21, 2017

That didn't work. This is the coding now and I want the image to resize correctly:

<div class="col-md-12 nopadding common-height ohidden">

				&lt;div class="col-md-6 col-padding" style="background: url('images/homepage/christi.jpg') center center no-repeat; background-size: cover;"&gt;
					&lt;div&gt; &lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="col-md-6 col-padding"&gt;

					&lt;div class="clearfix"&gt;
                    &lt;div class="fancy-title title-dotted-border title-center"&gt;

<h2>
Top Hat Dressage

</h2>
</div>
<h3>After many years of boarding my horses and trying to learn to ride dressage, it was my dream to create a wonderful place to be a horse and to be a dedicated student of dressage. Top Hat Dressage opened its doors in December 2008 with that dream in mind. <br>
<br>
I believe that the combination of our wonderful, talented trainers, our state of the art, horse friendly facility, customized care and supportive environment, allows our boarders to experience personal growth and success in this beautiful, classical sport which is steeped in tradition and respect for the horse.<br>
</h3><h4 align="center">- Christi Meyers</h4>

				  &lt;/div&gt;

			  &lt;/div&gt;
		  &lt;/div&gt;

The url for this is:
http://tophatdressagellc.com/new_site/index_thd.html

I tried putting in the code above and the image got all messed up and short on the desktop. I didn't even try it on the mobile. Please advise on how to correct this problem with the above coding.
Thanks

LlenorasSep 25, 2017

I've provided the urls for the problems. Please let me know what I can do to fix the image responsiveness in mobile and the contact page - map and form.

LlenorasSep 26, 2017

Its been two weeks since I've contacted you about the lack of image responsiveness on mobile. The theme says it's mobile responsive. I'm trying to launch this site, but the image behavior needs to be fixed. Your solution didn't work. I've provided urls. Please let me know when you can fix this.

I also gave you a url for the contact page with is also not functioning properly. Thank you.

SSemicolon WebSTAFFSep 28, 2017

Hello,

Thanks for your Patience!

  1. Replace the following HTML code:

and replace it with:

and then use the following CSS Code in the css/custom.css File: 

.device-sm .common-height-team-image { max-height: 350px; }

.device-xs .common-height-team-image { max-height: 300px; }
 
.device-xxs .common-height-team-image { max-height: 250px; }

This code only targets the iPad, iPhone Landscape/Portrait Mode. The Desktop Mode will be unaffected. Please use these codes and provide us with a URL with the updated codes if you are still facing an issue.

  1. The issue with the Contact Form is that the include/phpmailer Folder does not exist on your Servers which processes the Contact Form. Simply adding this Folder should fix the issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

LlenorasOct 4, 2017

Hi,
Image responsiveness is finally working - thank you.

Contact form is submitting correctly now - great. BUT the map is still only displaying when offline. Please advise. Here is the link again:
http://tophatdressagellc.com/new_site/contact_top_hat_dressage.html
And I've attached a screenshot of the page when it's offline and working just great. It's not making sense. And is just a blank map spot when live.

Please advise.

LlenorasOct 4, 2017

Here is the screenshot in a lower resolution so your system will take it.

SSemicolon WebSTAFFOct 6, 2017

Hello,

We have just checked out your Website and the js/jquery.gmap.js File does not exist on your Servers: http://tophatdressagellc.com/new_site/js/jquery.gmap.js .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

LlenorasOct 9, 2017

Now the map is there, but the red marker and text still don't show up.

LlenorasOct 10, 2017

Also, the instagram feed is not showing the pictures. I got the correct id, but no pictures display.

LlenorasOct 13, 2017

Hi, I'm still waiting to launch my client's site. Why isn't the red marker and associated text still not showing up on the live version of the page. It works no problem offline. And I can't get the Instagram feed to show my pictures.

SSemicolon WebSTAFFOct 21, 2017

Hello,

Thanks for your Patience!

We have checked out your Website and the http://tophatdressagellc.com/new_site/images/icons/map-icon-red.png does not exist on your Servers. You will need to upload this image to your Servers so that it displays Online.

For Instagram:

  1. Go to https://www.instagram.com/developer/ > Manage Clients > Register a New Client > Create a New Client (Add http://localhost/ in the Redirect URL) > Uncheck: Disable implicit OAuth (In Security Tab)

  2. Go to this URL: https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token and make sure that you replace the CLIENT-ID and REDIRECT-URI in the URL with their Actual Values. This will fetch you your Access Token.

  3. Open the js/functions.js File and find the following code:

SEMICOLON.widget.instagramPhotos( '36286274.14661be.9a5851191e5142c98c6d5ffd026db8e4', '14661befee3e4b4b973fc88adc617c41' );

then replace 36286274.14661be.9a5851191e5142c98c6d5ffd026db8e4 with the newly generated Access Token in the step above and replace 14661befee3e4b4b973fc88adc617c41 with the Client ID of your Newly Created Client.

  1. Then you can simply add your User ID in the data-user Attribute and the data-type="user" Attribute should always be User since Instagram has blocked Access for other types of Content.

To get your Instagram User ID, please visit your Instagram Profile URL in the Browser and then paste/hit enter the following code in the Developer Tools Console: 

window._sharedData.entry_data.ProfilePage[0].user.id

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