Working on a couple sites I've noticed the core omega styling doesn't adapt the basic contact form for mobile styling. Adding in the following seems to keep the basic styling in place but allows it to adapt well to the mobile screen sizes.

.contact-form .form-item {
float: left;
}
.contact-form .form-text, .contact-form .form-select {
width: 100%;
}
.contact-form .form-actions {
float: left;
margin-left: 40px;
}

Himerus - what do you think about including this into omega's optional css to keep some of the base styling consistent with responsive?

CommentFileSizeAuthor
#10 omega-contact_form3-1481234.patch886 bytescellar door
#8 omega-contact_form2-1481234.patch814 bytescellar door
#6 omega-contact_form-1481234.patch829 bytescellar door

Comments

cellar door’s picture

cellar door commented

Forgot to add the clear to global.css it should go:

.contact-form .form-item {
float: left;
clear: left;
}

In default.css it should then have:

.contact-form .form-item {
clear: none;
margin-left:5%;
width: 40%;
}

IMHO this makes the contact form much more attractive as it uses up all the available space, and stays responsive on mobile.

cellar door’s picture

cellar door commented

And just for commonality I just found this change in the form-action to match the rest in margin.

in global.css:

.contact-form .form-actions {
float: left;
margin-left: 5%;
}

So to make it less confusing (which I'm sure it is after all this)

In global.css:

.contact-form .form-item {
float: left;
clear: left;
}
.contact-form .form-text, .contact-form .form-select {
width: 100%;
}
.contact-form .form-actions {
float: left;
margin-left: 5%;
}

in default.css

.contact-form .form-item {
clear: none;
margin-left:5%;
width: 40%;
}

Alright, after confusing even myself I'm going to stop for the night. Let me know what y'all think about the styling.

cellar door’s picture

cellar door commented
Title: Update Omega Core Contact Form Styling » Update Omega Core Contact and User Login Form Styling

And now for the User login form:

global.css

#user-login .form-text {
width: 100%;
}

default.css 

#user-login .form-text {
width: auto;
}

Simple but it makes these work much better on mobile.

cellar door’s picture

cellar door commented
Category: bug » feature
Status: Active » Reviewed & tested by the community

Should this be in 3.2? Not sure if it will effect sites already in existence but will help fix ones that haven't addressed it.

markwk’s picture

markwk commented
Status: Reviewed & tested by the community » Active

i have the same issue and I've had it on other projects. To be honest, you should update the original issue to reflect your solution or post a patch.

cellar door’s picture

cellar door commented
StatusFileSize
new omega-contact_form-1481234.patch829 bytes

Let's see if this passes testing.... I know a few haven't lately. I changed the core Omega CSS file omega-forms.css and added a media query for it to work w/ the standard formats. This should allow for most use cases and since it's in the omega-forms.css its easily disabled and/or overwritten.

cellar door’s picture

cellar door commented
Status: Active » Needs review

forgot to update the status for testing purposes

cellar door’s picture

cellar door commented
StatusFileSize
new omega-contact_form2-1481234.patch814 bytes

jerryitt found that I had a stray max-width: in there from testing. I've removed it and re-patched.

jerryitt’s picture

jerryitt commented
Status: Needs review » Reviewed & tested by the community

#8 apply's cleanly to 7.x-3.x-dev
Looks much better than the default styling and is easy to override if needed.

cellar door’s picture

cellar door commented
StatusFileSize
new omega-contact_form3-1481234.patch886 bytes

Another fix for a clear issue on some various mobile screen widths

jerryitt’s picture

jerryitt commented

patch #10 is working and fixes the clear:left; issue that was in #8.

markwk’s picture

markwk commented

Cool changes + Nice additions.