CRED upload buttons in mobile look

This thread is resolved. Here is a description of the problem and solution.

Problem:
CRED upload buttons and recaptcha field responsive in the mobile.

Solution:
Please add this CSS to your theme’s or child theme’s style.css file:

@media screen and (max-height: 575px) {
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }


@media (max-width: 480px) {
.separate-containers .inside-article, 
.separate-containers .comments-area, 
.separate-containers .page-header, 
.separate-containers .paging-navigation, 
.one-container .site-content, 
.inside-page-header
{
    padding:0 !important;
}
}

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	-
-	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 4 replies, has 2 voices.

Last updated by PZ 7 years ago.

Assisted by: Noman.

Author

Posts

November 6, 2017 at 1:40 pm #586761

I am trying to: make CRED uplaod buttons and recaptcha fit in the mobile look.

Link to a page where the issue can be seen: hidden link

Please look at the attached screenshots. The text visible right next to the button is cut off and below in the same CRED form it comes out of the border; it also happens to recaptcha.

How can I tame this?

November 6, 2017 at 2:33 pm #586783

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting Toolset support. Please add this CSS to your theme’s or child theme’s style.css file:

@media screen and (max-height: 575px) {
	#rc-imageselect, .g-recaptcha {
		transform: scale(0.77);
		-webkit-transform: scale(0.77);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
}

Thank you

November 10, 2017 at 8:59 am #588398

Thanks, it worked with recaptcha but what about the other two?

November 10, 2017 at 2:47 pm #588621

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Please add this CSS to your theme’s or child theme’s style.css file:

@media (max-width: 480px) {
.separate-containers .inside-article, 
.separate-containers .comments-area, 
.separate-containers .page-header, 
.separate-containers .paging-navigation, 
.one-container .site-content, 
.inside-page-header
{
	padding:0 !important;
}
}

If you need to reduce file upload button and text size then please use following CSS:

@media (max-width: 480px) {
input[type="file"] {
    font-size: 10px;
}
}

Thank you

November 10, 2017 at 3:03 pm #588629

Great. Thanks again.