Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

file Responsive changes not working

More
10 years 4 months ago #3683 by LukeDouglas
Responsive changes not working was created by LukeDouglas
I have downloaded and installed your Custom reCaptcha plugin and documentation. I have enabled your plugin and disabled the Joomla default reCaptcha. FYI, I tried this with both plugins enabled and just the Custom reCaptcha enabled. I've left it in this state so you can view it.

SouthAlabamaCustoms.com

I've added this CSS:
/* gantry default desktop query size is 960px to 1199px */
@media (min-width: 960px) and (max-width: 1199px) {
  /* put css here */
	
#recaptcha_widget,
#recaptcha_widget .recaptcha_isnot_showing_audio,
#recaptcha_widget .recaptcha_is_showing_audio,
#recaptcha_area,
#recaptcha_table,
#recaptcha_image,
#recaptcha_challenge_image {width:268px !important;}
}

The "recaptcha_table" does recognize the CSS changes and calculates a width of 268px. However, it's container #recaptcha_area still has a fixed 318px width which breaks the responsive sidebar.

No where in the developer tool Firebug do I see any class #recaptcha_widget or any of the other classes or ID's listed in the Custom reCaptcha documentation sheet.

So my question is how to I edit my 'gantry-custom.css' so I can set the widths based on media queries?

Thanks.

Luke

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #3684 by admin
Replied by admin on topic Responsive changes not working
Hi Luke,

you are not using the custom recaptcha on your site. The models provided by Google don't always have all the CSS tags or IDs.

You need to use the custom recaptcha plugin in order to completely style the widget to your liking.
Olivier.

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #3685 by LukeDouglas
Replied by LukeDouglas on topic Responsive changes not working
Olivier,

I checked and the Joomla default Google ReCaptcha is disabled and the Custom ReCaptcha is enabled.

I checked and the Custom ReCaptcha was not set in the Global Configuration which I have now set.

I cleared Joomla cache and browser cache, refreshed the page and updated my CSS as listed below. Please note this only affects browser widths from 960px to 1199px so if you have your browser that is larger than 1199px or thinner than 960px, you will not see the CSS changes I made.
/* gantry default desktop query size is 960px to 1199px */
@media (min-width: 960px) and (max-width: 1199px) {
  /* put css here */
	
#recaptcha_widget_div .recaptcha_nothad_incorrect_sol,
#recaptcha_widget_div .recaptcha_isnot_showing_audio,
#recaptcha_area,
#recaptcha_table,
#recaptcha_center {width:268px !important;}
#recaptcha_image,
#recaptcha_challenge_image {width:236px !important;}
}

From what I can see, the problem is the "<center>" container as it is fixed at 300px which is breaking the sidebar container width of 270px. The <td> with class 'recaptcha_image_cell' which is before the <center> and <div> with ID 'recaptcha_image' which is after the <center> does reflect the settings of the CSS file.
<td class="recaptcha_image_cell" colspan="4">
<center>
<div id="recaptcha_image" style="width: 300px; height: 57px;">
<img id="recaptcha_challenge_image" width="300" height="57" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VusSHqu3j0ZCy9Qx7VWN4oSzlogLFFzAS_LqGCQKEwQfs30mQZrq2yc-hHiwBkMwiDgKNPiohlXlYZ-XW36vC0TUE8uPCuZK5aYPE41r5LZvcxfqCj3BJdhJS0T4PdIhKnPelnE-ns5tUMPzvN7SgS0Zw6cJUHMLK2ZICSuYZc5FwW-VSehwSKT55WyKSI1k0P2ABBnoA9B1PXfO6zTSr4eQJ3oqW7tpvRZBOAAMXY5Mmut8-jkM4nsAp9PTE9dTY8m_B3uet31ZoHY_pR2V4iY95YyBIVwYUCHu12hRcjTiOmcGBtM&th=,8bBrjh4jDKiWF7boGVcPl09t9fAAAABJoAAAAAvYAM1BXrqq-sUKOJ3r93Retu8KmwEX4TKrWMpJIK0NqhVtn4rwlKp84C80lh-xL8vxQWUaCC6Me6S5D15f70lYsolByu4yMPvwcGOh00gilvCEpzt3wpZ9EIGj4nEac-s97xS47KJq2gvzeal8ax7WCDOE1ePlw18rxLETHUuSDrhIRt5FmZP4ik6gEYvI7QMzPE_zXWfeH2agvfW0TfhZuJjefVeZZioOLZ3c-kK9fbwJqu0D4ds3EdW8Jjc5WAqGr3AVNcEeM9IbgEkmooV9" alt="reCAPTCHA challenge image">
</div>
</center>
</td>

Any suggestions?

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #3686 by admin
Replied by admin on topic Responsive changes not working
Hello Luke,

I am sorry to insist but the recaptcha I see on your site is NOT the custom recaptcha.

There are 3 spots where recaptchas are set up: the global configuration, the user manager and the contact manager.
If you are using a specific extension for the contact form, chances are that extension is the one deciding what recaptcha is being used. I suspect you are using a specific extension since the contact form seems to be in a module position.
Olivier.

Please Log in or Create an account to join the conversation.