Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Help Fixing Alignment Of Search, Cart And Banners Please Rate Topic   - - - - -

 
  • ecokate
  • Member
  • Trial users
  • Join Date: 27-Oct 20
  • 21 posts

Posted 18 January 2021 - 08:31 PM #1

I am trying to fix all the little pieces that don't align.  

 

For example:

 

- The search box is not vertically aligned with the cart, even though they are in the same grid

- The search bar and the cart have no space between them in the mobile view

- The three large banners don't resize properly when viewing on a tablet and aren't aligned

- The social icons are all crammed together and the text runs into the next icon

 

See the website here: Good furniture (moebelk.ch)

 

I've searched the forums and read the documentation, and I think that I probably need to change the padding in a css file somewhere, but I just can't figure it out. I've come over to cs-cart from Shopify so I am on a really steep learning curve here. 

 

Any help would be appreciated. 

 

 



 
  • ecokate
  • Member
  • Trial users
  • Join Date: 27-Oct 20
  • 21 posts

Posted 11 February 2021 - 11:40 AM #2

I am trying to fix all the little pieces that don't align.  

 

For example:

 

- The search box is not vertically aligned with the cart, even though they are in the same grid

- The search bar and the cart have no space between them in the mobile view

- The three large banners don't resize properly when viewing on a tablet and aren't aligned

- The social icons are all crammed together and the text runs into the next icon

 

See the website here: Good furniture (moebelk.ch)

 

I've searched the forums and read the documentation, and I think that I probably need to change the padding in a css file somewhere, but I just can't figure it out. I've come over to cs-cart from Shopify so I am on a really steep learning curve here. 

 

Any help would be appreciated. 

 

Anyone out there have any ideas on this? It's gotten worse:

 

1. The shopping cart is now under the 'my cart' text, it looks really bad.  I haven't been able to figure out how to upload screenshots to the forum, so I have made it a product, you can see the product image here:

https://www.moebel-b...t-category/test

 

2. The 'My Account' in the footer shows the 'orders' menu even though no one is logged in, and the 'sign in' and 'register' buttons don't line up with the menu title. As above you can see the issue here: https://www.moebel-b...gory/my-account

 

(for all the other things I found temporary ways to change the placement of the blocks so that the mis-alignment wasn't obvious, but I haven't managed to figure out how to actually fix it).

 

I'm pretty sure it has to do with the css, but I haven't changed anything in the css related to either of these things and I don't even know where to edit the css. All I have found is the custom css box under theme editing where you can write css, but I don't know how to write css and I don't know where to find the file that shows me the css  :-(



 
  • ecokate
  • Member
  • Trial users
  • Join Date: 27-Oct 20
  • 21 posts

Posted 21 February 2021 - 12:37 PM #3

PARTIALLY SOLVED ....After many hours of clicking around and reading the internet. In case anyone else has these problems, here are some of the solutions.

 

1. To fix the weird shopping cart issue, where the cart was over top of the word 'my cart' : 

  • Navigate to design / layout,  and open the gear icon for the block where your 'shopping cart' is
  • Paste 'top-cart-content' in the field 'User-defined CSS class'

 

2. To fix the alignment of the banner boxes on the landing page, which in my case seemed to spontaneously re-arranged themselves:

  • Open the page where the issue in in your browser
  • Hover your mouse over the part of the page where the issue is, right-click and select 'inspect' from the dropdown
  • Find the part of the code that relates to what you are interested in by mousing over the code in the 'elements' window
  • Play around with the numbers and text in the 'styles' and 'computed' tabs until it looks right
  • Copy the part that you changed 
  • Navigate to Design / Themes / Theme editor / Dropdown: Custom CSS and paste your new CSS code there
  • No idea if this is the right way to fix it, but it seems to have worked

I am still working on the search bar that floats to the top of the header block instead of the bottom, and doesn't align with the shopping cart (see https://www.moebel-b...shop-furniture/- we updated our URL), and the 'My account' alignment.