Hi, can anyone help me change the width of my contact for fields without the background ?
This code worked but it was moving the background as well
Thank you:)
@media (min-width: 767px) {
.t4s-row {
max-width: 80%;
}
}
Topic summary
A user seeks help adjusting contact form field widths without affecting the background styling. The original post includes CSS code that successfully changed width but unintentionally moved the background element as well.
Proposed Solutions:
Two community members offered CSS-based fixes:
-
Solution 1: Add media query targeting form inputs (excluding checkboxes and submit buttons) with
width: 28% !importantat min-width 750px. Implementation viatheme.liquidfile before</body>tag. -
Solution 2: Modify
base.cssortheme.cssby adding media query at min-width 600px targeting.contact-formwith 10% left/right padding adjustments. Includes visual reference showing expected result.
Both solutions use responsive design approaches with media queries. The discussion remains open pending confirmation from the original poster on whether either solution resolved the issue without background displacement.
Hello @Daniel19901
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
- Here is the solution for you @Daniel19901
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 600px) {
.contact-form {
padding-left: 10%;
padding-right: 10%;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.