How to add padding between two grid items?

Highlighted
Explorer
167 2 8

Hi,

I'm trying to create a login and register page in one. I'm trying to create the following:

Knipsel.PNG

 

As u can see the left grid is aligned to the left and the right one is aligned to the right and between those 2 grids theres a empty space, how can  I achieve this?

This is what I got so far:


Knipsel.PNG

 

With the following code:

{% include 'breadcrumb' %}

<div class="grid">

    {% if paginate.pages > 1 %}
    <div class="grid-item pagination-border-top">
      <div class="grid">
        <div class="grid-item{% if fasle and has_sidebar %} large--four-fifths push--large--one-fifth{% endif %}">
            <div class="text-center">
              {% include 'pagination-custom' %}
            </div>
        </div>
      </div>
    </div>
    {% endif %}
  
  

  </div>
	

  <div class="grid-item small--one-whole one-half" style="padding-left: 0px; padding-right: 20px; margin-top: 30px; border: 1px solid #00205a;">

    <div class="note form-success" id="resetSuccess" style="display:none;">
      We've sent you an email with a link to update your password.
    </div>

    {% form 'customer_login' %}

      <h1 style="font-family: Muli,sans-serif; font-weight: 600; padding-top: 20px; color: #00205a;">{{ 'customer.login.title' | t }}</h1>

      {% include 'form-errors-custom' %}

      <label for="customer_email" class="hidden-label">{{ 'customer.login.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="customer_email" placeholder="{{ 'customer.login.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>

      {% if form.password_needed %}

        <label for="customer_password" class="hidden-label">{{ 'customer.login.password' | t }}</label>
        <input type="password" value="" name="customer[password]" id="customer_password" placeholder="{{ 'customer.login.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>

        <p>
          <a href="#" onclick="showRecoverPasswordForm();return false;">{{ 'customer.login.forgot_password' | t }}</a>
        </p>

      {% endif %}

        <p>
          <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">
        </p>
        {{ 'customer.login.or' | t }} <a href="{{ shop.url }}">{{ 'customer.login.cancel' | t }}</a>

    {% endform %}


    {% comment %}
      This page uses JavaScript to show/hide the recover password form
    {% endcomment %}
    <div id="recover_password" style="display: none;">

      <h2>{{ 'customer.recover_password.title' | t }}</h2>
      <p>{{ 'customer.recover_password.subtext' | t }}</p>

      {% form 'recover_customer_password' %}

        {% include 'form-errors-custom' %}

        {% if form.posted_successfully? %}
          {% assign reset_success = true %}
        {% endif %}

        <label for="recover-email" class="hidden-label">{{ 'customer.recover_password.email' | t }}</label>
        <input type="email" value="" name="email" id="recover-email" placeholder="{{ 'customer.recover_password.email' | t }}" autocorrect="off" autocapitalize="off">

        <p>
          <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
        </p>
        {{ 'customer.login.or' | t }} <a href="#" onclick="hideRecoverPasswordForm();return false;">{{ 'customer.recover_password.cancel' | t }}</a>
        
      {% endform %}

    </div>

    {% if shop.checkout.guest_login %}
      <hr>

      <h2>{{ 'customer.login.guest_title' | t }}</h2>

      {% form 'guest_login' %}
        <input  type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
      {% endform %}
      
    {% endif %}

  </div>

   <div class="grid-item small--one-whole one-half" style="padding-left: 0px; padding-right: 20px; margin-top: 30px; border: 1px solid #00205a;">

  	    <h1 style="font-family: Muli,sans-serif; font-weight: 600; padding-top: 20px; color: #00205a;">{{ 'customer.register.title' | t }}</h1>

    {% form 'create_customer' %}

      {% include 'form-errors-custom' %}

      <label for="first_name" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" value="" name="customer[first_name]" id="first_name" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.errors contains "first_name" %} class="error"{% endif %} autofocus>

      <label for="last_name" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" value="" name="customer[last_name]" id="last_name" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.errors contains "last_name" %} class="error"{% endif %}>

      <label for="email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="email" placeholder="{{ 'customer.register.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off">

      <label for="password" class="hidden-label">{{ 'customer.register.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="create_password" placeholder="{{ 'customer.register.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>
      <p>
        <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
      </p>
      {{ 'customer.register.or' | t }} <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

    {% endform %}

  </div>

</div>



<script>
  /*
    Show/hide the recover password form when requested.
  */
  function showRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'block';
    document.getElementById('customer_login').style.display='none';
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'none';
    document.getElementById('customer_login').style.display = 'block';
  }

  // Allow deep linking to the recover password form
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  // reset_success is only true when the reset form is
  {% if reset_success %}
    document.getElementById('resetSuccess').style.display = 'block';
  {% endif %}
</script>

Hope someone can help me!

 

NOTE*: On mobile I want them aligned below eachother..

 

Website url: smartsnutrition.myshopify.com

Password: plazay

Thanks in advance,

Niels

0 Likes
Highlighted
New Member
10 0 0

Hi Niels,

 

If your website is utilising CSS Grid, I would recommend you look at https://css-tricks.com/snippets/css/complete-guide-grid/.

 

You can achieve this using 'gap' CSS property.

 

I hope this helps. If you need me to provide an example, I'm more than happy to supply one.

0 Likes
Highlighted
Explorer
167 2 8

Hi man,

I took a look at this but this is kind of out of my league, can you make example that fits my site? I can give you acces if u want.

0 Likes
Highlighted
New Member
10 0 0

Hi Neils,

 

Sure, I just need an email address to access your page. I can mock something up for you.

0 Likes
Highlighted
Explorer
167 2 8

Hi, e-mailadress is niels-schutte@hotmail.com . You sent me link so i can give u acces?

0 Likes
Highlighted
New Member
10 0 0

Hi Neils,

 

It's quite difficult because I don't have access to the theme etc to test or make changes to. But I've mocked up the basic grid layout which collapses on viewports under 768px. You can find the CodePen here: https://codepen.io/mrmathewc/pen/QWjdrmE?editors=1000.

 

Here is the full code:

 

<style>
    html, body { padding: 0; margin: 0; }
    .wrapper {
        max-width: 1100px;
        padding: 0 30px;
        margin: 0 auto;
    }
    .grid {
        display: grid;
    }
    .grid-gap-lg {
        grid-gap: 45px;
    }
    @media(min-width: 768px) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,1fr);
        }
    }
    .border-2 {
        border: solid 2px;
    }
    .border-blue-dark {
        border-color: #00205a;
    }
    .p-5 {
        padding: 1.25rem;
    }
</style>
<div class="wrapper">
    <div class="grid md:grid-cols-2 grid-gap-lg">
        <div class="border-2 border-blue-dark p-5">
            Login
        </div>
        <div class="border-2 border-blue-dark p-5">
            Register
        </div>
    </div>
</div>

 

If you have a developer, you can provide this example and if they have basic knowledge of HTML/CSS they will know how to apply this to the template file. It's only a few classes which you need to add to the appropriate div. 

 

I hope this helps.

0 Likes
Highlighted
Explorer
167 2 8

Hi, 


If i use that code combined with login and register form I'm getting the following result, we almost there..:


Code:

<style>
    html, body { padding: 0; margin: 0; }
    .wrapper {
        max-width: 1100px;
        padding: 0 30px;
        margin: 0 auto;
    }
    .grid {
        display: grid;
    }
    .grid-gap-lg {
        grid-gap: 45px;
    }
    @media(min-width: 768px) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,1fr);
        }
    }
    .border-2 {
        border: solid 2px;
    }
    .border-blue-dark {
        border-color: #00205a;
    }
    .p-5 {
        padding: 1.25rem;
    }
</style>

{% include 'breadcrumb' %}

<div class="grid">

    {% if paginate.pages > 1 %}
    <div class="grid-item pagination-border-top">
      <div class="grid">
        <div class="grid-item{% if fasle and has_sidebar %} large--four-fifths push--large--one-fifth{% endif %}">
            <div class="text-center">
              {% include 'pagination-custom' %}
            </div>
        </div>
      </div>
    </div>
    {% endif %}
</div>
	

<div class="wrapper">
    <div class="grid md:grid-cols-2 grid-gap-lg">
        <div class="border-2 border-blue-dark p-5">
                <div class="note form-success" id="resetSuccess" style="display:none;">
      Instructies voor het resetten van je wachtwoord zijn naar je e-mailadres gestuurd. Neem contact op met onze klantenservice als je hulp nodig hebt. 
    </div>

    {% form 'customer_login' %}
	
      {% comment %}
    	{{ 'customer.login.title' | t }}
     {% endcomment %}
      <h1 style="font-family: Muli,sans-serif; font-weight: 600; padding-top: 20px; color: #00205a;">Inloggen</h1>

      {% include 'form-errors-custom' %}

      <label for="customer_email" class="hidden-label">{{ 'customer.login.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="customer_email" placeholder="{{ 'customer.login.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>

      {% if form.password_needed %}

        <label for="customer_password" class="hidden-label">{{ 'customer.login.password' | t }}</label>
        <input type="password" value="" name="customer[password]" id="customer_password" placeholder="{{ 'customer.login.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>

      {% endif %}

    	{% comment %}
    		{{ 'customer.login.forgot_password' | t }}
     	{% endcomment %}
    
    	<p>
          <a href="#" onclick="showRecoverPasswordForm();return false;">Je wachtwoord vergeten?</a>
    	</p>
    
        <p>
          <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">
        </p>
    {% endform %}


    {% comment %}
      This page uses JavaScript to show/hide the recover password form
    {% endcomment %}
    <div id="recover_password" style="display: none;">

      <h2>{{ 'customer.recover_password.title' | t }}</h2>
      <p>{{ 'customer.recover_password.subtext' | t }}</p>

      {% form 'recover_customer_password' %}

        {% include 'form-errors-custom' %}

        {% if form.posted_successfully? %}
          {% assign reset_success = true %}
        {% endif %}

        <label for="recover-email" class="hidden-label">{{ 'customer.recover_password.email' | t }}</label>
        <input type="email" value="" name="email" id="recover-email" placeholder="{{ 'customer.recover_password.email' | t }}" autocorrect="off" autocapitalize="off">

        <p>
          <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
        </p>
        {{ 'customer.login.or' | t }} <a href="#" onclick="hideRecoverPasswordForm();return false;">{{ 'customer.recover_password.cancel' | t }}</a>
        
      {% endform %}

    </div>

    {% if shop.checkout.guest_login %}
      <hr>

      <h2>{{ 'customer.login.guest_title' | t }}</h2>

      {% form 'guest_login' %}
        <input  type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
      {% endform %}
      
    {% endif %}
        </div>
        <div class="border-2 border-blue-dark p-5">
            {% comment %}
    	{{ 'customer.register.title' | t }}
      {% endcomment %}
  	<h1 style="font-family: Muli,sans-serif; font-weight: 600; padding-top: 20px; color: #00205a;">Registreren</h1>

    {% form 'create_customer' %}

      {% include 'form-errors-custom' %}

      <label for="first_name" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" value="" name="customer[first_name]" id="first_name" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.errors contains "first_name" %} class="error"{% endif %} autofocus>

      <label for="last_name" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" value="" name="customer[last_name]" id="last_name" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.errors contains "last_name" %} class="error"{% endif %}>

      <label for="email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="email" placeholder="{{ 'customer.register.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off">

      <label for="password" class="hidden-label">{{ 'customer.register.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="create_password" placeholder="{{ 'customer.register.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>
      <p>
        <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
      </p>
      {{ 'customer.register.or' | t }} <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

    {% endform %}
        </div>
    </div>
</div>
  



<script>
  /*
    Show/hide the recover password form when requested.
  */
  function showRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'block';
    document.getElementById('customer_login').style.display='none';
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'none';
    document.getElementById('customer_login').style.display = 'block';
  }

  // Allow deep linking to the recover password form
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  // reset_success is only true when the reset form is
  {% if reset_success %}
    document.getElementById('resetSuccess').style.display = 'block';
  {% endif %}
</script>

Result:

Knipsel.PNG

 

As u can see the content and the breadcrumbs above dissapears behind the header..Also the footer layout is not good anymore, it used to be like this:


footer.png

Isnt there a way I can give you acces? 

Niels

0 Likes
Highlighted
Explorer
167 2 8

Can you help me fix this?

0 Likes
Highlighted
Explorer
167 2 8

No one?

0 Likes