Padding issues in Contact Form 7 form

This topic contains 30 replies, has 2 voices, and was last updated by  appscaptain 4 years, 6 months ago.

Author Posts

appscaptain

Hi,

First time using Microthemer.
I’m trying to fix some simple padding issue (so I thought) with MicroThemer. Can’t make it work. See this video:
https://cl.ly/0C0D2D0L2Y1o

Hopefully someone can help?

P.S. A thought – maybe I should start from scratch with just a basic form with no columns, and then layout it into the column based layout shown in the video with Microthemer. Would that be easier? I’m a bit concerned about the also having it remain responsive though.


Sebastian

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


appscaptain

Hi Sebastian,

Thanks, yeah I forgot I misspoke on the margin for some reason (that why I changed margin to padding in my post).

Tried to change the width of the fields, but this only fixes it in full width, not when the page width changes. See this:
https://cl.ly/1x2z0R023E2z

P.S. The site should be up now at appscaptain.com. It has been down earlier today though. If it isn’t available please let me know.

All the best

Anders


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.


appscaptain

Hi Sebastian,

Thanks for the tips and techniques. I’ll keep them in mind as I learn MicroThemer. Very cool that you can avoid changes affecting smaller screen.

About the concrete example. I understand your logic but it didn’t seem to work. This is what I did:
https://cl.ly/2p0n1i0B240x

What am I doing wrong?


Sebastian

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


appscaptain

Hi Sebastian,

Thanks for the video.

Useful techniques you showed. I still couldn’t make it work unfortunately after following your video:
https://cl.ly/0D1c462Z1i18

Not sure what I’m doing wrong.

I didn’t do the form layout CSS myself. But my form’s CSS seems a bit messy and hard to tweak. I know CSS a bit, but my issue is always the targeting of elements, dealing with columns, as well as my changes not applying (despite using !important). That is why I bought MicroThemer.

Maybe I could remove all the column alignment css from the field, to start from scratch (vertically aligned (one field on each line)), and then we could try to build this column setup from scratch only using MicroThemer. I have spent days trying to fix this without luck, before I bought Microthemer.

If it could be demonstrated how to do something like that with only Microthemer, I think it would help me and lots of other MicroThemer users, learn the basic techniques to be used in other cases when working with columns and responsive layout. Also after this alignment, my next task is to add a Captcha field to the form as well, and layout that with MicroThemer, which I haven’t been able layout manually with CSS either.

If this amount of customization from scratch is possible with MicroThemer, it could be interesting to see how you would accomplish this in a tutorial video. A video that starts with a new form without columns like this:
FIELD
FIELD
FIELD
FIELD
FIELD
FIELD
CAPTCHA
SUBMIT

And show how to turn it into this, similar to my website:

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

Don’t you think that will be an incredibly useful tutorial video for everyone, that would demonstrate a lot of techniques useful for your newbie users, as well as to show the power of MicroThemer for marketing purposes?

I could also share admin access if that would be helpful?

All the best

Anders


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


appscaptain

Hi Sebastian,

Nice to see your video with Chrome that it worked. Looks so easy from the outside, when you know what you’re doing 🙂

I didn’t change any settings with MicroThemer – they are all as default. Have shared access with sales@themeover.com

Here’s a video I recorded with the current state of the form:
https://cl.ly/3z1E0X2m3P1V

P.S. Crossing my fingers for the unstyled form content tutorial. Would be really helpful.
P.P.S Have to say – truly breathtaking support you deliver! Best support for any product I’ve bought ever. No exaggeration. Really appreciate all of your help. Hopefully I’ll be able to figure things out as I learn, so I won’t have to bug you so much with questions.

All the best

Anders


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 🙂


appscaptain

Hi Sebastian,

Thanks a lot! Hope you got the fix working!

In regards to the form, now it does seem to align in one of the views – however the responsive view still have issues:

A. https://cl.ly/0J300Z1x2V1n – would like to have 2 fields with Fornavn and Efternavn and 18px distance
And under that – to fill out the Virksomhed field so it aligns with phone number

FORNAVN – EFTERNAVN
VIRKSOMHED—————

If I also want 18 px margin between the fields in this view:
B. And here: https://cl.ly/2F0G1g0i2419 – would like it to keep the 18px distance between all fields.
C. And here – https://cl.ly/2v0K1T183z14 – same as under A. (Above)

How can I fix these?

All the best


Sebastian

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.


appscaptain

Hi Sebastian,

Thanks, sounds like a great idea! Yeah this CSS is some mess.

To answer your questions:
1. I have code only two places – in here:
http://appscaptain.com/wp-admin/admin.php?page=wpcf7&post=15908&action=edit
And in here:
https://cl.ly/0O2e1w2R1U1u (in the Customizer) from line 36 and down.

2. The original form is editable here: http://appscaptain.com/wp-admin/admin.php?page=wpcf7&post=15908&action=edit

However a lot of it (including the placements of notifications from ContactForm 7 and more) might break if I just remove it all. And this form also uses much of that CSS (and it should be kept working):
http://appscaptain.com/ansoegning-app-strategi-session/

So I don’t know what I can delete. I think it’s better you look at the code. Alternatively if that makes more sense, I have duplicated the contact form and front page so it is clean to work with:

In that case link to the clean form here:
http://appscaptain.com/wp-admin/admin.php?page=wpcf7&post=18143&active-tab=0
You can preview the test page here:
http://appscaptain.com/frontpage-copy/

All the best

Anders


Sebastian

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

net errors

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


appscaptain

Hi Sebastian,

I’m actually managing the server myself. However I haven’t been able to reproduce the issue so far, and there’s no error in the nginx logs. Logging is enabled. Is there any way I can reproduce this? See this video for some demonstration:
https://cl.ly/3Y1G2v2S373s

And everything loads without errors:
https://cl.ly/3L3Q2k1g132j

I’m wondering if the issues concerns your user credentials on WordPress. If you need to be super admin? Also tried to delete the cache. Maybe that helped?

Also I’ve tried to set the permissions to 777 for the stylesheets – they were like this:
https://cl.ly/331o221A3y19

changed them to this temporarily:
https://cl.ly/2D431H1l0B2j

This is what loads everytime for me:
directly on the server:
https://cl.ly/272u2d1B191I

loaded when clicking the link:

I
——
/* MICROTHEMER STYLES */

/*= General =================== */

/** General >> FirstX **/
.firstX {
width: 100% !important;
max-width: 168px !important;
}

/*= Cf7 General Styling ======= */

/** Cf7 General Styling >> Form container **/
.form-container {
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-wrap: wrap !important;
-moz-flex-wrap: wrap !important;
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}

They are identical.

All the best

Anders


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


appscaptain

Thanks Sebastian. That is weird. I’ll take a look at it and see if I can figure out what’s happening, hopefully fix it and get back to you!

All the best

Anders


Sebastian

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

Cheers,
Sebastian


appscaptain

Hi Sebastian,

Ok, did some tests. I get these errors as well now when I click around:
https://cl.ly/3q080w2X0G1Q

I’ve done some research and experimentation:
• No matter what I can’t reproduce any error in the nginx logs – even when setting the state to debug (which provides all output).
• I have turned off all plugins but it still happens after that
• I’ve set proxy_buffering off; in nginx. Still happens.
• I’ve deleted the proxy_temp cache folder.

Are you sure it’s not a bug inside MicroThemer? Everything else works perfectly on the server.

All the best

Anders


appscaptain

P.S. also tried to switch theme to Twenty Fifteen and it still happens….hmmm…


Sebastian

The reason this problem only presents with Microthemer might be because Microthemer loads the stylesheet dynamically with JavaScript. Normally a stylesheet is downloaded with all of the other resources when the page first loads.

It might be that there is some way I can update Microthemer to overcome this problem on your server. I will certainly look into this. But so far I haven’t found any information linking dynamically loaded resources with the net errors we’re getting. I will continue to look for a solution at the code level however.

Another thing Microthemer is doing a bit differently from normal is reloading the same resource in quick succession – after each style change in Microthemer. The following thread discusses how this can be a problem if caching is disabled (it may or may not be relevant): https://github.com/civetweb/civetweb/issues/417

If you can send me a backup of the site, I will check to see if the net error problem occurs on a different server too. That should help us determine the best angle to tackle the issue. Do you have a local WAMP/LAMP copy of the site you can check by any chance?

Cheers,
Sebastian


appscaptain

Hi Sebastian,
Thanks for the answer. Sorry, don’t have a local LAMP/WAMP server. And I use an Nginx based VPSSIM for the server setup and management.

If I have to drop VPSSIM, there’s no way I can realistically manage my webserver myself (will take way too much time and skill). Also would rather not switch to Apache. Because everything else works absolutely perfectly and fast, and have been for years. So really hope there’s some solution. Crossing my fingers 🙂

About export. I can’t export only the one site, because it’s part of a multisite, but I’ve exported the database for the complete multisite with backupbuddy (all files + databases). Currently preparing download links I will send. WARNING: It’s a 4+ GB download 🙂

P.S. Is there a way I can send non private messages directly in a forum post here?

Have a great weekend!

Anders


Sebastian

Thanks for sending the download link Anders. I’ll setup a copy of your site on my server on Monday to see if the same error happens. I’ll update you soon.

Cheers,
Sebastian


appscaptain

Thanks Sebastian! Can’t way to get MicroThemer up and running! 🙂


Sebastian

Hey Anders,

I managed to install a copy of your site on my server. But I’m not getting the error that happens on the live site. This suggests the problem is server specific.

One thing I noticed with the backup you sent me was that the .htaccess file was blank. I got the site working by adding the default wordpress rewrite rules (and nothing else):

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Could you try replacing your current .htaccess code with that temporarily to see if it eliminates the error?

Thanks,
Sebastian

You must login or register to reply to this topic.