Contact Page Text Size


(James Dexter) #1

Hi guys,

After taking the advice of members here I had great success with updating the PHP on the web host and the Store now working correctly a new problem has arisen.

The Contact page in Rapidweaver has text that is too small. The fields are too large AND the text is too small.

Any ideas please.

James


(James Dexter) #2

I have tried this as well since I’m using the Corporation Theme from Yazool as well and pasted it into the CSS on the page properties but still no joy:

.form-input-field, .form-input-textarea {
font-size: 1.1em;
}


(Doug Bennett) #3

A url would help people take a look.


(James Dexter) #4

It is not published yet but here is what I mean - the text box on the web in another Yazool theme (Flatty) looks fine but not this.


(Doug Bennett) #5

Without a URL it’s difficult for someone to help you as we have nothing to use web tools on. Perhaps @yuzool or @kryten can give a hand.


(Stuart) #6

Hi

If using the default contact form page type in “Corporation” theme… then try adding this CSS to the page level CSS container:

label {
	font-size: 1.3em;
}

.message-text {
    font-size: 1.3em;
}

That should get you going. The numerical values in those snippets are just suggestions… try adjusting them up and down until you find values compatible with your design.


(James Dexter) #7

Hi Stuart,

Thanks very much for that. That does alter the size of the text in the form which is great.

It is the actual size of the text you type into the boxes though that is too small and that doesn’t help.

I am trying to get the typed text to be around the size of this here: http://demo.yuzoolthemes.com/flatty/contact.php

That is a very cool theme btw…


(Stuart) #8

@Sparkoids

Ah. Okay… sure… sorry… I should have read from the beginning of the thread.

Try…

input.form-input-field {
    font-size: 1.4em;
}

To adjust the text size in the form fields.

And… should you need it:

.form-input-field {
    height: 25px;
}

To adjust the height of the fields themselves.


(James Dexter) #9

Stuart that is absolutely fantastic. Thank you so much for the help. That is perfect looking :-}

Last question for you I promise. How do I make the active fields do this? It isn’t important for my site but I just wondered how to do it. I have tried everything in the Flatty theme but can’t see how it works.

What happens here is the boxes (with rounded corners) go black when the field is highlighted.

http://demo.yuzoolthemes.com/flatty/contact.php


(Stuart) #10

Hi @Sparkoids

Glad to help.

What you are asking about is not a built in style option on the ‘Corporation’ theme, but it can still be achieved with some custom CSS. Try adding this to the CSS container for the contact form page:-

input.form-input-field:focus {
    border: 2px solid red;
}

textarea.form-input-field:focus {
    border: 2px solid red;
}

Naturally you change the ‘red’ to any valid colour choice you wish.

Hope this helps and thanks for choosing Yuzoolthemes!