less widen form on a page

Solved
Highlighted
Excursionist
52 0 4

Hi,

I just create a new template for a nearly full width page. As you will see, below my page I have a Form. This form appear to widen, how could hi reduce it?

Here the visual:

https://www.oneoffedition.com/pages/design-service-1

VincentCavret_0-1603367285232.png

Here the code I use for the Layout:

!doctype html>
 
<html class="no-js" lang="{{ shop.locale }}">
  <head>
 {%- render 'layouthub_header' -%}
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="theme-color" content="{{ settings.accent_color }}">
 
    <title>
      {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
    </title>
 
    {%- if page_description -%}
      <meta name="description" content="{{ page_description | escape }}">
    {%- endif -%}
 
    <link rel="canonical" href="{{ canonical_url }}">
 
    {%- if settings.favicon -%}
      <link rel="shortcut icon" href="{{ settings.favicon | img_url: '96x' }}" type="image/png">
    {%- endif -%}
 
    {% render 'social-meta-tags' %}
 
    {{content_for_header}} 
 <!--LHREPLACED-->
 
    <link rel="stylesheet" href="{{ 'theme.scss.css' | asset_url }}">
    
    <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
<!-- ADD One Off CSS -->
    <link rel="stylesheet" href="{{ 'one-off-mod.scss.css' | asset_url }}">
    <!-- END ADD CSS -->
    
    <script>
      // This allows to expose several variables to the global scope, to be used in scripts
      window.theme = {
        pageType: {{ request.page_type | json }},
        moneyFormat: {{ shop.money_format | json }},
        moneyWithCurrencyFormat: {{ shop.money_with_currency_format | json }},
        productImageSize: {{ settings.product_image_size | json }},
        searchMode: {{ settings.search_mode | json }},
        showPageTransition: {{ settings.show_page_transition | json }},
        showElementStaggering: {{ settings.show_element_staggering | json }},
        showImageZooming: {{ settings.show_image_zooming | json }}
      };
 
      window.routes = {
        rootUrl: {{ routes.root_url | json }},
        cartUrl: {{ routes.cart_url | json }},
        cartAddUrl: {{ routes.cart_add_url | json }},
        cartChangeUrl: {{ routes.cart_change_url | json }},
        searchUrl: {{ routes.search_url | json }},
        productRecommendationsUrl: {{ routes.product_recommendations_url | json }}
      };
 
      window.languages = {
        cartAddNote: {{ 'cart.general.add_note' | t | json }},
        cartEditNote: {{ 'cart.general.edit_note' | t | json }},
        productImageLoadingError: {{ 'product.slideshow.image_loading_error' | t | json }},
        productFormAddToCart: {% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t | json }}{% else %}{{ 'product.form.add_to_cart' | t | json }}{% endif %},
        productFormUnavailable: {{ 'product.form.unavailable' | t | json }},
        productFormSoldOut: {{ 'product.form.sold_out' | t | json }},
        shippingEstimatorOneResult: {{ 'cart.shipping_estimator.one_result_title' | t | json }},
        shippingEstimatorMoreResults: {{ 'cart.shipping_estimator.more_results_title' | t | json }},
        shippingEstimatorNoResults: {{ 'cart.shipping_estimator.no_results_title' | t | json }}
      };
 
      window.lazySizesConfig = {
        loadHidden: false,
        hFac: 0.5,
        expFactor: 2,
        ricTimeout: 150,
        lazyClass: 'Image--lazyLoad',
        loadingClass: 'Image--lazyLoading',
        loadedClass: 'Image--lazyLoaded'
      };
 
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
      document.documentElement.style.setProperty('--window-height', window.innerHeight + 'px');
 
      // We do a quick detection of some features (we could use Modernizr but for so little...)
      (function() {
        document.documentElement.className += ((window.CSS && window.CSS.supports('(position: sticky) or (position: -webkit-sticky)')) ? ' supports-sticky' : ' no-supports-sticky');
        document.documentElement.className += (window.matchMedia('(-moz-touch-enabled: 1), (hover: none)')).matches ? ' no-supports-hover' : ' supports-hover';
      }());
    </script>
 
    <script src="{{ 'lazysizes.min.js' | asset_url }}" async></script>
 
    {%- if template == 'customers/addresses' -%}
      <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer></script>
      <script src="{{ 'customer_area.js' | shopify_asset_url }}" defer></script>
    {%- endif -%}
 
    <script src="{{ 'libs.min.js' | asset_url }}" defer></script>
    <script src="{{ 'theme.min.js' | asset_url }}" defer></script>
    <script src="{{ 'custom.js' | asset_url }}" defer></script>
    
 
    <script>
      (function () {
        window.onpageshow = function() {
          if (window.theme.showPageTransition) {
            var pageTransition = document.querySelector('.PageTransition');
 
            if (pageTransition) {
              pageTransition.style.visibility = 'visible';
              pageTransition.style.opacity = '0';
            }
          }
 
          // When the page is loaded from the cache, we have to reload the cart content
          document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
            bubbles: true
          }));
        };
      })();
    </script>
 
    {% render 'microdata-schema' %}
  
 
 
 <script>
window.ChatraSetup = {
    colors: {
        buttonText: '#FFFFFF', /* chat button text color */
        buttonBg: '#0E0909'    /* chat button background color */
    }
};
</script>
 
<!-- Chatra widget code -->   
    <style >
@media screen and (max-width: 600px) {
#raq_lname {
            float:right !important;
            margin-left:0px !important;
    }
</style>
<script src="//staticxx.s3.amazonaws.com/aio_stats_lib_v1.min.js?v=1.0"></script></head>
  <body class="prestige--v4 {% if template.directory %}template-{{ template.directory | handle }}{% endif %} template-{{ template.name | handle }}">
    <a class="PageSkipLink u-visually-hidden" href="#main">{{ 'header.navigation.skip_to_content' | t }}</a>
    <span class="LoadingBar"></span>
    <div class="PageOverlay"></div>
    <div class="PageTransition"></div>
 
    {% section 'popup' %}
    {% section 'sidebar-menu' %}
 
    {%- if template != 'cart' -%}
      {% render 'cart-drawer' %}
    {%- endif -%}
 
    <div class="PageContainer">
      {% section 'announcement' %}
      {% section 'header' %}
   
 
{{ content_for_layout }}
      <style>
 
.studioengine  {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0px 11px;
}
</style>
 
      {% section 'footer' %}
    
    </div>
    <!--Start: SC Request a Quote -->
<script type="text/javascript" src="/apps/request-a-quote/scripts/js/main.js"></script>
<!--End: SC Request a Quote -->
    
    
    <script type="text/javascript">
  $(function(){
      $('.ProductForm input:radio').change(function(){
         setTimeout(function(){ 
           
            var variant_id = $('[name=id]').val();
                                     if (typeof raq_Update_Variant == 'function'){
                                        if (sc_raq_app_global.allow_variant == 1) {
                                //           select_id = selector.domIdPrefix;
                                          raq_btn = $('.sc-raq-add-to-quote-btn');
                                          if (variant_id != null) {
                                            raq_btn.attr('scr-vid', variant_id);
                                            sc_raq_app_global.mark_unmark_all_btns_by_added_list();
                                          } else {
                                            raq_btn.attr('scr-vid', -1);
                                            sc_raq_app_global.mark_unmark_all_btns_by_added_list();
                                          }
                                        }
 
 
                                      }
                              
                              
                              }, 500);  
      });          
});
  </script>
  {%- render 'layouthub_footer' -%} 
 <input type="hidden" id="656565115116111114101" data-customer-id="{{ customer.id }}" data-customer-email="{{ customer.email }}" data-customer-name="{{ customer.first_name }} {{ customer.last_name }}"/><input type="hidden" name="aaaformbuilder_customer_logged_id" value="{{customer.id}}" id="aaaformbuilder_customer_logged_id"></body>
</html>

 

Here the code of the template page I am using for this page:

{% layout 'theme.fullwidth' %}
<link href="//studios.cdn.theshoppad.net/pagestudio/blocks.css?v={{ page.metafields.global.version | default: 3 }}&shop={{ shop.permanent_domain }}" rel="stylesheet" type="text/css"/>
<script src="//studios.cdn.theshoppad.net/pagestudio/pagestudio.dist.js?v={{ page.metafields.global.version | default: 3 }}"></script>
<div class="studioengine">{{ page.content }}</div>
{%- form 'contact', class: 'Form Form--spacingTight' -%}
{%- if form.posted_successfully? -%}
<p class="Alert Alert--success">{{ 'contact.form.successfully_sent' | t }}</p>
{%- endif -%}

{%- if form.errors -%}
<div class="Form__Alert Alert Alert--error">
<ul class="Alert__ErrorList">
{%- for field in form.errors -%}
{%- if field == 'form' -%}
<li class="Alert__ErrorItem">{{ form.errors.messages[field] }}</li>
{%- else -%}
<li class="Alert__ErrorItem"><strong>{{ form.errors.translated_fields[field] }}</strong> {{ form.errors.messages[field] }}</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
{%- endif -%}

<div class="Form__Group">
<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[name]" aria-label="{{ 'contact.form.name' | t }}" placeholder="First Name" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.name' | t }}</label>
</div>

<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[name]" aria-label="{{ 'contact.form.name' | t }}" placeholder="Last Name" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">Last Name</label>
</div>
</div>

<div class="Form__Group">

<div class="Form__Item">
<input type="email" class="Form__Input" name="contact[email]" aria-label="{{ 'contact.form.email' | t }}" placeholder="Email" required {% if customer %}value="{{ customer.email }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.email' | t }}</label>
</div>

<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[phone]" aria-label="Phone" placeholder="Phone" required>
<label class="Form__FloatingLabel">Phone</label>
</div>
</div>


<!-- Address zip -->

<div class="Form__Group">

<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[Address]" aria-label="Address" placeholder="Address" required >
<label class="Form__FloatingLabel">Address</label>
</div>

<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[phone]" aria-label="Phone" placeholder="Zip Code" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">Zip Code</label>
</div>
</div>

<div class="Form__Item">
<textarea style="height:150px;" name="contact[body]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ 'contact.form.message' | t }}" placeholder="your text" required></textarea>
<label class="Form__FloatingLabel">{{ 'contact.form.message' | t }}</label>
</div>

<button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'contact.form.submit' | t }}</button>
{%- endform -%}
</div>

 

Thanks in advance!

Bye

0 Likes
Highlighted
Shopify Partner
85 26 24

Hi @VincentCavret ,

Please share your store password.


If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
Highlighted
Excursionist
52 0 4

Yes sorry. Password = IDD

0 Likes
Highlighted
Shopify Partner
85 26 24

This is an accepted solution.

You can add the below CSS code in theme.scss file.

#contact_form {
    max-width: 700px; // Change width based on your need
    margin: 0 auto;
}

Please accept this solution if it works for you.

Thanks, 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
Highlighted
Excursionist
52 0 4

It works perfectly, thank you

0 Likes