[jeffchiarelliParticipant]

As you can see from the link, I have two fields on my gravity form that are not spanning the width of the element. This creates an awkward looking form.

http://www.ogleschool.edu/beauty-school-programs-b

Can you please advise if there is a simple style or class that I can insert into the Cornerstone “style” or “class” elements that would resolve this issue?

Thanks in advance!

[jeffchiarelliParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Try adding following CSS under Customize > Custom > CSS:

.page-id-12366 #field_27_7, 
.page-id-12366 #field_27_8, 
.page-id-12366 #field_27_6, 
.page-id-12366 #field_27_5 {
    width: 100% !important;
}

Hope it helps.

[jeffchiarelliParticipant]

Thank you for your quick reply. It would seem like that would work, however, I added

    /* FULL WIDTH FORM FIELDS ON EMBEDDED LEAD FORMS ---------------------------------------------- */

.page-id-12366 #field_27_7, 
.page-id-12366 #field_27_8, 
.page-id-12366 #field_27_6, 
.page-id-12366 #field_27_5 {
    width: 100% !important;
}

to both my Customerize Custom CSS field and to my child theme CSS and neither seem to be working. Any thoughts as to what could be keeping these fields from expanding to 100% even after the custom CSS is added?

[jeffchiarelliParticipant]

It would appear that something in Cornerstone is overriding CSS to have full width fields.

You can see this example is just a page with the form added via VisualComposer:

http://www.ogleschool.edu/beauty-school-programs-c/

Then even before that custom CSS was added, this page existed and the fields span the width of the column properly….

http://www.ogleschool.edu/forms/request-information/

So, in my mind, there has to be something the Cornerstone is jacking with that’s overriding the existing (2nd link) and the new (1st link) full width CSS code….

[RadModerator]

Hi Jeff,

I’m not really sure what’s the problem, both pages has full-width elements. The definition of full-width element basically the one that takes up the width of its container.

For example, form here http://www.ogleschool.edu/forms/request-information/ is full-width to the 1/2 column as container, but less with added padding.

.grey-background {
    background: #eaeaea;
    padding: 25px;
    border: thin solid #ccc;
}

While here http://www.ogleschool.edu/beauty-school-programs-c/ is fullwidth to 1/1 column that has no padding, nor margin.

As for page template, this uses http://www.ogleschool.edu/forms/request-information/ a Layout – Fullwidth that still has a container, and this http://www.ogleschool.edu/beauty-school-programs-c/ uses Blank – No Container which doesn’t have spaces on both left and right.

Elements are full-width, but it depends on where they are placed. If you can provide a mockup of what you’re trying to achieve then I could recommend some additional procedures 🙂

Thanks!

[jeffchiarelliParticipant]

The problem here is really the form fields. There are two in particular that do not span the width of the element. This is a strange behavior within Cornerstone, because adding the form in VisualComposer, it spans the element without any custom CSS.

As you can see on this example page, even when I change it from 1 full to 3 column the fields still span the columns.

As you can see by the black arrows in my attached screenshot, that is not happening in cornerstone and I’ve combed over the code, but I can’t figure out what need to be changed so that the fields span the columns. Right now that’s all I’m trying to achieve. Fields that span the element (i.e. http://www.ogleschool.edu/forms/request-information/)

However http://www.ogleschool.edu/beauty-school-programs-c (one of the first pages I’ve built with Cornerstone) the Zip Code and Choose A Campus fields do not span the width of the element – as they do on every other form on my site. Can you advise as to what might be interfering?

[Rue NelModerator]

Hello There,

The field is not spanning because of this custom css code:

#field_27_7, #field_27_8, #field_27_6, #field_27_5 {
    clear: none;
    float: right;
    width: 48%;
}

Please add this code in your customizer:

.site #field_27_7, 
.site #field_27_8, 
.site #field_27_6, 
.site #field_27_5 {
    clear: none;
    float: none;
    width: 100%;
}

Hope this helps. Kindly let us know.

[jeffchiarelliParticipant]

Ok, so I added the code you suggested, but the zip code and campus fields look the same both on desktop and mobile.

Can you tell where the 48% width is coming from? I could not locate it in my customizer or in my child theme style.css file. This is only happening in Cornerstone – as you can see from the simple addition of the same form in VisualComposer (http://www.ogleschool.edu/beauty-school-programs-c/ )

I could remove the 48% if we could identify where it originated from or I’m open to any other ideas because neither .page-id nor .site work.

Thank you in advance for your continued assistance!

Note: the last fix actually looks like it works when customizer is open, but the second you close customizer, the fields go back to the way they were before.

[jeffchiarelliParticipant]

wouldn’t let me attached the screenshots because the file size was exceeded.

[RadModerator]

Hi there,

Another support here, I’m not sure to where to find the url that’s presented from your screenshot. Would you mind letting me know?

And I just checked cornerstone coding and can’t find any instances of css that can override it.

I’d like to further check, but I can’t really tell what’s wrong or what’s right. Your site is minified, cached, and hosted through CDN. I can’t trace them back to the correct file. Would you mind turning off all your caching, minifier, and cdn? I can do that, but it’s best if you will backup your settings and data first.

I found some console errors too which randomly display. And is it possible if I could download your copy through FTP, I like to test it on installation for comparison. You may provide your FTP login credentials in private reply too.

Thanks!

[Author]

Posts