Fix product page layout and margins issues

spree · Feb 9, 2019 · 1c07947 · 1c07947
1 parent 209a2e5
commit 1c07947
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/frontend/app/views/spree/products/_cart_form.html.erb b/frontend/app/views/spree/products/_cart_form.html.erb
@@ -1,7 +1,7 @@
 <%= form_for :order, html: { id: 'add-to-cart-form' } do |f| %>
   <div class="row" id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
     <% if @product.variants_and_option_values(current_currency).any? %>
-      <div id="product-variants" class="col-md-6">
+      <div id="product-variants" class="col-lg-6 mt-4">
         <h3 class="product-section-title"><%= Spree.t(:variants) %></h3>
         <ul class="list-group">
           <% @product.variants_and_option_values(current_currency).each_with_index do |variant, index| %>
@@ -34,7 +34,7 @@
     <% end %>
 
     <% if @product.price_in(current_currency) && !@product.price.nil? %>
-      <div data-hook="product_price" class="col-md-5">
+      <div data-hook="product_price" class="col-lg-5 mt-4">
         <div id="product-price">
           <h3 class="product-section-title"><%= Spree.t(:price) %></h3>
           <div>
@@ -59,7 +59,7 @@
         </div>
 
         <% if @product.can_supply? %>
-          <div class="add-to-cart">
+          <div class="add-to-cart mt-2">
             <div class="input-group">
               <%= number_field_tag :quantity, 1, class: 'title form-control', min: 1 %>
               <div class="input-group-append">

diff --git a/frontend/app/views/spree/products/show.html.erb b/frontend/app/views/spree/products/show.html.erb
@@ -2,7 +2,7 @@
 
 <% cache cache_key_for_product do %>
   <div data-hook="product_show" class="row" itemscope itemtype="https://schema.org/Product">
-    <div class="col-md-4 col-sm-5" data-hook="product_left_part">
+    <div class="col-lg-4 col-md-5" data-hook="product_left_part">
       <div data-hook="product_left_part_wrap">
         <div id="product-images" data-hook="product_images">
           <div id="main-image" class="card  " data-hook>
@@ -25,16 +25,16 @@
       </div>
     </div>
 
-    <div class="col-md-8 col-sm-7" data-hook="product_right_part">
+    <div class="col-lg-8 col-md-7" data-hook="product_right_part">
       <div data-hook="product_right_part_wrap">
         <div id="product-description" data-hook="product_description">
-          <h1 class="product-title" itemprop="name"><%= @product.name %></h1>
+          <h1 class="product-title mt-2" itemprop="name"><%= @product.name %></h1>
 
           <div itemprop="description" data-hook="description">
             <%= product_description(@product) %>
           </div>
 
-          <div id="cart-form" class="mt-4" data-hook="cart_form">
+          <div id="cart-form" data-hook="cart_form">
             <%= render partial: 'cart_form' %>
           </div>
         </div>