Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Layout Issues with Search Icon & Cart & Shipping Page (Responsive)

cartMobileresponsiveSearch
    • 8 years, 9 months ago rebeccaolson
      Participant

      Expired

      Hello –

      After the recent update to Tower 1.8.2, I have the following new issues on my site:

      1. The search icon/mini cart icon in the header menu has no left margin. There is no separation between the final/right menu item on the header (BUD & OIL), and the search icon. It now looks like the search icon is sitting on top of the “L”

      2. The cart page and shipping details page on mobile/responsive is very messed up in terms of layout. Please see the screenshots:

      CART

      https://www.lavenderconnection.com/wp-content/uploads/2016/08/Screenshot_20160814-155352.png

      https://www.lavenderconnection.com/wp-content/uploads/2016/08/Screenshot_20160814-155400.png

      SHIPPING

      https://www.lavenderconnection.com/wp-content/uploads/2016/08/Screenshot_20160814-155510.png

      Thanks!

      Rebecca

    • 8 years, 9 months ago rebeccaolson
      Participant

      Expired

      I apologize – I just realized this question was accidentally posted in the Specular theme forum. I’m not sure how that happened – these questions are related to the Tower theme. Thanks!

    • 8 years, 9 months ago Mirela
      Participant

      Hello,

      1-Where are you accessing this? I opened your site and i don’t see the icons without padding. Please see this screenshot: https://www.clipular.com/c/5312567194419200.png?k=TfDOJVX34kFp-K1jS1mlKQiebxA

      2-I added this code into your custom css box:

      /*Cart page*/
      @media (max-width: 480px){
      .woocommerce table.shop_table td, .woocommerce-page table.shop_table td { font-size: 13px;}
      .woocommerce table.shop_table td, .woocommerce-page table.shop_table td { padding: 6px 4px !important;}
      .woocommerce-page td.product-quantity {
          max-width: 55px !important;}
      .woocommerce table.shop_table {  margin-left: -25px !important;}
      .woocommerce #content table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon .input-text { width: 100px !important;}
      .woocommerce table.shop_table th, .woocommerce-page table.shop_table th {
          padding: 9px 9px !important;
      }
      .cross-sells h2 {
          padding-top: 30px;
          padding-bottom: 20px;
      }
      }
      /*Checkout page*/
      @media (max-width: 480px){
      .woocommerce-billing-fields {
          width: 300px !important;
          float: left;
      }
      .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
          float: right;
          width: 100% !important;
      }  
      }

      Please check the result in “Cart” and “Checkout” page.

      Note: To edit/remove/add login information for your website, please go to your forum profile (https://support.codeless.co/?bbp_user=968) and fill in the fields. So for future topics you do not have to send us this information again.
      Don’t worry your data is secure as it is visible only from you and support admins!

      Best regards!

    • 8 years, 8 months ago rebeccaolson
      Participant

      Expired

      Mihaila –

      1) The issue seems to have resolved itself, so no further action is necessary.

      2) CART: Please see the following screenshot – there is no padding between the columns, so they are difficult to view:

      https://www.lavenderconnection.com/wp-content/uploads/2016/09/Screenshot-Sep-5-2016-8_59_19-PM.png

      CHECKOUT: This looks great now.

      Thanks!

      Rebecca

    • 8 years, 8 months ago Mirela
      Participant

      Hello,

      Please add this code into the page’s custom css box:

      @media (max-width: 480px){
      .woocommerce-cart ul.products li.product.columns-2 {
          margin-right: 10% !important;
          width: 40% !important;
      }}

      Result screenshot.

      Best regards!

    • 8 years, 7 months ago rebeccaolson
      Participant

      Expired

      Mihaila – Sorry for the late response.

      2) Yes, that worked perfectly.

      Thanks!
      Rebecca

    • 8 years, 1 month ago rebeccaolson
      Participant

      Expired

      Mihalia –

      Two of these issues popped up again with the most recent Tower update:

      1) In regular screens, the search icon is laying on top of the final menu item. This is only when using the Opera browser – it looks fine in Firefox, Chrome and IE.

      2) The tables in the Cart page are messed up. (Checkout page is fine this time around.)

      I haven’t changed any of the CSS code you gave me above, last time this happened. Please let me know if you need screenshots.

    • 8 years, 1 month ago Mirela
      Participant

      Hello,

      Yes, please send us the respective screenshots. So we can understand better the situation.

      Best regards!

    • 8 years, 1 month ago rebeccaolson
      Participant

      Expired

      Mihaila – The issue seems to have sorted itself out. Thanks!

Viewing 8 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password