Skip Navigation

[Resolved] 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 5 years, 2 months 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)

This topic contains 4 replies, has 2 voices.

Last updated by PZ 5 years, 2 months ago.

Assigned support staff: Noman.

Author
Posts
#586761

PZ
3.png
2.png
1.png

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?

#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

#588398

PZ

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

#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

#588629

PZ

Great. Thanks again.