Padding issues in Contact Form 7 form

Hey,

Thanks for the helpful video. I think the problem is that you are changing padding, when you think you are changing margin. Margin is empty space on the outside of an element, while padding is empty space inside an element’s borders.

The selector you were working on targets the three input fields, which all have some padding (but zero margin). So you just set the right padding on all three text inputs to zero, which means there would be no space between text entered in the fields and the right-hand border. But this doesn’t improve the alignment. And in fact, the lack of right-hand alignment may not have anything to do with margin. There is certainly no margin on the text fields.

To fix the alignment issue, you could try increasing the width of the text fields slightly. It’s hard to say for sure though, without viewing the page you’re working on in my browser. I tried visiting appscaptain.com, but I guess you’re working on the site locally?

Cheers,
Sebastian

Hey Anders,

No I don’t think you’re completely misunderstanding (as you mentioned in your last video). You’ve just stumbled across the consequences of making changes at one screen size on other screen sizes. It’s good that you’re mindful of that. Microthemer’s Large Desktop tab is useful for applying styles to large screens only (1200px wide and above). Use that instead of the All Devices tab when you want to ensure your style changes do not affect smaller screens.

However, to fix your current issue, I actually recommend making just one style change – set the max-width to 168px on the 3 boxes that contain the text fields, not the text fields themselves. And remove your width increase on the right-hand text field. You can target the 3 boxes by clicking just below the text fields. Or, click on a text field and then click the up arrow on the directional controls to the right of the Target button that triggers targeting mode. This moves targeting up to the next parent element.

It seems the maths used for aligning 3 columns of form fields with the rest of the form is slightly wrong by default. The max-width for the 3 columns is currently 166 pixels. By increasing this to 168px, you will add an extra 6px to the 3 column row, aligning it with the fields below. And this approach won’t have the unwanted side-effect of changing the way the form displays on smaller screen sizes.

Understanding which elements to apply which styles to will be easier if you read a little bit about responsive design / HTML / CSS. Our tutorial runs through the basics: https://themeover.com/html-css-responsive-design-wordpress-microthemer/

I hope that helps. Please let me know if you have any further questions.

Cheers,
Sebastian

Side note: I noticed you resized the whole browser in your video to change the width of the site preview. You can actually drag the top rulers to the left and right to decrease/increase the width of the site preview.

My bad Anders. I gave you the wrong advice in my last post. You need to target the input field and click up on the directional controls twice, or click the element you targeted in your last video and then click once on the up arrow.

I failed to notice that the immediate parent element of the text input is an h3 element, not the div element for the column I was inspecting. It’s a bit unusual to wrap an h3 element around a form input, which caught me off guard.

I’ve prepared a video to show you what I mean (re-uploaded because the sound was missing): http://somup.com/cFn620V4i8

I hope that helps, and apologies again for dropping the ball. I’m here if you need guidance on anything else.

Cheers,
Sebastian

Hey Anders,

Oh man, I’m so sorry this one change has turned out to be so troublesome. I think it might be best if you send me admin access via our secure contact form so I can see exactly how Microthemer interacts with the page. I was using Chrome’s dev tools before, but I think I missed a potential specificity issue using that method. Such that Microthemer’s style didn’t override the default 166px style. When you targeted all 3 divs, that was exactly what I was suggesting. But did you disable Microthemer’s !important preference by any chance? It’s fine if you did, but you will just need to choose a selector that matches the specificity of the one used to style the form originally. I will demonstrate this once I have access to your admin area.

Just so you have some proof that the max-width setting will align the form properly once it sticks, here is a video showing how tried out that style in Chrome: http://somup.com/cFnloJV4qb

Microthemer is certainly capable of styling a form from scratch – a form that has no default styling. You can do anything with Microthemer that you can do with regular CSS. If a certain property isn’t supported with a GUI field (e.g. transform properties aren’t yet supported) you can can enter them via the <> custom code field. Selectors can take any form too. However, in your case I don’t think it is necessary to start from scratch. Let’s get this column alignment sorted, and then I will show you how to align the captcha field once you’ve added it 🙂

I do agree that a tutorial showing how to transform completely unstyled content into a recognisable layout would be helpful for a number of user though, and I have added this to my todo list.

Cheers,
Sebastian

Hi Anders,

I see what I missed in the Chrome tools now. You were viewing the site via the Large Desktop tab which reduces the screen preview to the minimum screen size it applies to (1200px wide) – following my tip about targeting only large screen sizes. While I was viewing the site full screen.

It just so happened that the form had a style rule of width:30% for the boxes which only applied to screen sizes 1200px or below. At full width, the boxes had 100% width. And this meant that the boxes would go right up to whatever max-width value we set (168px).

To fix this, I just set max-width:168 and width:100% on the All Devices tab. So that it applies to all screen sizes, including screens below 1200px, which in this case we wanted. If you login to your MT install you will see the changes.

We can move onto the captcha form next.

Sorry for the slow reply today, I just discovered an important issue with MT where using it across multiple tabs at the same time (or multiple people working in it at the same time) can cause the loss of selectors under certain circumstances. I’m trying to release a fix for this ASAP.

Cheers,
Sebastian

P.S. Thanks for your kind words, I’m glad you view my support on this thread from a positive perspective lol 🙂

Anders, I think you’re right. Now that I’m looking at how the form has been constructed for mobile, it has so many errors/oddities that trying to fix them all would create a far more complicated situation than starting from scratch. Sorry it took me a while to get to what you were saying.

If you can strip away the custom CSS, I will style the form with Microthemer in the layout you requested and record the process for future reference:

FIELD – FIELD – FIELD
FIELD – FIELD
FIELD
CAPTCHA – SUBMIT

Do you know how the custom css was added to the page? And if the form HTML is editable via the WP admin interface? I noticed some errors in the HTML e.g. the id two-column has been used multiple times, as if it were a class, when ids should only appear on the page once.

Thanks for the info Anders, I started styling the form on your front page copy. But then I noticed something strange, which will almost certainly have confounded your efforts to make style changes with Microthemer. Your server intermittently fails to load the stylesheet after a style change. Sometimes an empty response is returned, other times it partially loads the stylesheet but misses off CSS code towards the end. Using Chrome’s browser console, I see the following errors repeated a lot:

net::ERR_CONTENT_LENGTH_MISMATCH
net::ERR_EMPTY_RESPONSE

When trying to load this stylesheet : http://appscaptain.com/wp-content/uploads/sites/micro-themes/active-styles.css

Unfortunately, this issue makes working with Microthemer near impossible. But it needs to be fixed at the server level. Could you open a ticket with your web host to ask if anything can be done?

Some info I found when researching the error, which might be useful to you/your web host:
https://stackoverflow.com/questions/22183859/javascript-err-content-length-mismatch

Thanks,
Sebastian

Hey Anders,

The error actually happens intermittently when I make style changes in Microthemer, not when the page first loads. I just tried making some changes again, but the issue remains for me. If you just randomly apply some styles, you might get the issue too. Background colors are good for spotting it.

http://somup.com/cFnqlpVaIg

If you don’t get any issues, I wonder if it could it be IP/Geo related? I’m based in London, UK.

Cheers,
Sebastian

OK, good luck. Let me know if you need anything from me.

Cheers,
Sebastian