Re: How to change size of Contact Form in Studio Theme

ntlee · ‎03-25-2024

Who can help? I want to change the size of the contact form in Studio Theme

Just want to play around with different sizes until it fits with the overall design

I tried some CSS suggestions but they don't work with the Studio theme

Thanks in advance

websensepro · ‎03-25-2024

Hi @ntlee,

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.contact {
    max-width: 1200px !important;
}

@media only screen and (max-width: 998px) {
    .contact {
        max-width: 600px !important;
    }    
}

Thanks

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

websensepro · ‎03-25-2024

Hi @ntlee,

Could you please share your store url link?

Thanks

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

ntlee · ‎03-25-2024

Hi Websensepro, here it is:

https://feelinglikecrab.myshopify.com/pages/contact

ThePrimeWeb · ‎03-25-2024

Hey @ntlee,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

1200px is desktop, 600px is mobile

<style>
.contact {
    max-width: 1200px !important;
}

@media only screen and (max-width: 989px) {
    .contact {
        max-width: 600px !important;
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ntlee · ‎03-25-2024

Thanks ThePrimeWeb, but I don't have the option to customize Liquid. I think it's because the free template doesn't allow it.

websensepro · ‎03-25-2024

Hi @ntlee,

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.contact {
    max-width: 1200px !important;
}

@media only screen and (max-width: 998px) {
    .contact {
        max-width: 600px !important;
    }    
}

Thanks

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

ntlee · ‎03-25-2024

This works, but it only changes the top part, name and email field. It doesn't affect the bottom part of the contact form.

websensepro · ‎03-26-2024

Alright, you want to adjust the size of the contact form's bottom part?

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

ntlee · ‎03-26-2024

i tried this code again today and somehow today it came through, it works!

Raj-webdesigner · ‎03-26-2024

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

Try This Code

#shopify-section-template--20958478795084__contact_form_RFiRPY .color-scheme-1.gradient .contact.page-width--narrow {
    max-width: 1000px !important;
    padding: 0 50px 50px;
}

Are you looking for Shopify Developer then your search is over I will help you

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

Re: How to change size of Contact Form in Studio Theme

How to change size of Contact Form in Studio Theme

☕Buy me a coffee☕

Are you looking for Shopify Developer then your search is over I will help you

Your Willpower Contribution Link

❤️Tip❤️

Community Blog Articles