How to change the widths (lengths) of shipping & billing fields ON ALL DEVICES like that:

1st row: First name (50%) & Second name (50%)

2nd row: Address (full width)

3th row: Country (50%) & City (50%)

4th row: State (50%) & Postcode (50%)

(This is the default Woocommerce checkout block, but It does not appear to be the same on mobile version…)

Or:

1st row: First name (50%) & Second name (50%)

2nd row: Address (66%) & Postcode (33%)

3th row: Country (33%) & State (33%) & City (33%)

I tried to apply some CSS by myself but failed, it wasn’t responsive on all devices. Thank you.

Lastly, will the table look different in a browser as opposed to the builder? Every time I preview the table and the table widths do not look the same as they do in the builder or is that the result of the plugin not being fully installed?

I love this plugin I just wish I could use it at its full strength. Any suggestions would be greatly appreciated.

<div class="wp-block-image">
<figure class="alignleft size-large is-resized"><img
src="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg"
alt="" class="wp-image-18233" width="499" height="299"
srcset="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg 555w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-300x179.jpg 300w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-150x90.jpg 150w"
sizes="(max-width: 499px) 100vw, 499px" /></figure></div>

I have two questions:
1. how are these new dimensions decided? are 555, 300 and 150 standard widths? Is there a golden rule?
2. Where does the class “wp_image-18233” come from? what is the number 18233? it’s not the ID of the post…

Thank you

For example, a two column table adds the following code:

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>

etc…

This is quite a problem for me since I have created custom styles for different types of table displays for my client, but now the inline styles are overriding most of this custom CSS.

How can I change this behavior? The only solution I have right now is to go in and manually remove the table and td styles, but this is tedious for me and causes trouble for my client who is not proficient working with code.

I just want to be able to insert a clean, no styles table so that I can control the styling via CSS. For instance, I don’t always want my table to be 100% wide or have a border or for my cells to be of equal width, but now I no longer have control over these things with CSS.

Hope someone can help!

1. When the user hits submit I do not get an email come through.

On my existing website (with the form I am trying to duplicate):

https://www.publictalksoftware.co.uk/contact/contact.php

My form works there.

I have looked in the WPForm SEttings | Norifications and it seems to be using {admin_email} whatever that value is.

Please advise.

2. With the notifications it seems to only offer “Success”.

On my original form I was able to provide responses for:

Success
Error
Faliure

Is this possible?

3. Is it possible to make all the form fields the same width?

4. If I input an invalid email address there is a message that shows up in red. I am colour blind and this combination is burning my eyes. Is there any suitable CSS styling we can apply here to display it with an alternative style?

5. Is it possible to extend the “robot” recatchpa to be more than just a check box? On other computers I find that it then displays a popup window of images where you have to pick three that match a criteria.

Thanks for all your help.

Andrew

The following is all that have in my page and no matter what % I enter the column width does not seem to change. Furthermore, with the latest change to Table 13 for whatever reason, it changed the column with from that of the others on the same page even though they are all technically the same. Please note that my choice of 33% is somewhat arbitrary. I was planning something along the lines of 10%/30%/60% but no matter what I set it to nothing seems to change.

Any guidance or help would be greatly appreciated.

[table id=13 column_widths=”33%|33%|33%” /]
[table id=14 column_widths=”33%|33%|33%” /]
[table id=15 column_widths=”33%|33%|33%” /]
[table id=16 column_widths=”33%|33%|33%” /]

I used this reference to successfully set different footer widget widths. But they only apply to desktop and retain their mobile grid classes, hence the widgets stack side by side when the screen gets to tablet screen width. Even the widgets that are set to 100% behave this way.

Is there a way to apply the footer width to both mobile and desktop, so one can choose exactly the width of the footer widgets regardless of screen widths?

Thanks, Ike.

I’ve spotted a bugette in the about-us section—not so much pixel-perfection as verging on OCD, but there you go; I need to get out more

The row (and hence the columns in the row) in the about-us section are shifted to the left, rather than being properly centred. This is particularly noticable on a phone, where the columns are shown one after another, vertically, and are all clearly shifted to the left. It’s visible on the demo site on a phone.

The section header of the about-us section is fine. What comes after that is not.

Analysis as follows:
1. Bootstrap sets the margins of the container to be equal (with auto), thus centering the text.

2. The section header picks up 0px left and right from the html setting. We’re still centered.

3. The .about-us . row class’s margins are then set at -15px left and right (on line 2201 of the style.css). We’re still centered.

4. The .row class margins are then set at 0px left and right, together with float: left; and width: 100%; (on line 3290 of the style.css). These margins are ignored in the about-us section, as the .about-us . row class is more specific and overrides them. But the float: left; and width: 100%; stick. We’re now no longer centered.

The reason why this breaks the centering is a bit complex (I find it so, anyway!). It’s explained here. It scomes down to that combination of float: left; and width: 100%;, which shifts things to the left. You can see the opposite effect (that is, a shift to the right) if you float right with 100% width. The reasoning is complex, but it is what it is.

I understand why the theme wants to float left and have the 100% width. Without the former, the about-us section is wonky and without the 100% width, the get-in-touch section is wonky.

There are various solutions, and the most “elegant” ones would need to be tested across the site—but I know that touching Bootstrap-based CSS on an established theme is a rabbit-hole out of which it’s hard to extract yourself, so I won’t suggest them.

A pragmatic and better approach would be simply to fix the about-us section (which is the only one that I can see is visually broken), with an extra declaration at line 2201 of style.css:

FROM

.about-us .row {
	margin-left: -15px;
	margin-right: -15px;
}

TO

.about-us .row {
	margin-left: -15px;
	margin-right: -15px;
	width: auto;
}

This moves the text back to the centre, as it forces the browser to respect the negative right margin as well as the left one. And the CSS is specific enough only to affect the about-us section.

Any idea where to start in my styles sheet to adjust the responsive widths? Link to my site here