Jump to content

Modify position of shopping cart icon (mobile view only)

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://academicpipelineproject.com

Hi all!

First want to say thanks to this awesome community. It's been a life-saver for me the past few weeks on finding super useful info on custom CSS tweaks, etc. 

Quick question for everyone: is there any custom code to tweak the horizontal position of the shopping cart icon for mobile view? I've tried a few different pieces of CSS code, but doesn't seem to work. I've attached a screenshot of what I'm trying to do. From my iPhone view, the shopping cart icon is a little too close to the hamburger icon, thus visually looks crowded. It also affects tactile user input functionality as your fingers position has to be spot on to click on the cart vs the hamburger. Just looking to add a little bit of space to clean it up. 

What's also interesting is that the mobile preview mode in the SQ editor looks fine, it has proper spacing, but from my actual iPhone, you can see it's a little too crowded.

TIA!!!

 

IMG_27AE5452E19C-1.jpeg

Edited by otorres_app
Link to comment
  • Solution
8 minutes ago, otorres_app said:

Site URL: https://academicpipelineproject.com

Hi all!

First want to say thanks to this awesome community. It's been a life-saver for me the past few weeks on finding super useful info on custom CSS tweaks, etc. 

Quick question for everyone: is there any custom code to tweak the horizontal position of the shopping cart icon for mobile view? I've tried a few different pieces of CSS code, but doesn't seem to work. I've attached a screenshot of what I'm trying to do. From my iPhone view, the shopping cart icon is a little too close to the hamburger icon, thus visually looks crowded. It also affects tactile user input functionality as your fingers position has to be spot on to click on the cart vs the hamburger. Just looking to add a little bit of space to clean it up. 

What's also interesting is that the mobile preview mode in the SQ editor looks fine, it has proper spacing, but from my actual iPhone, you can see it's a little too crowded.

TIA!!!

 

IMG_27AE5452E19C-1.jpeg

Try

@media only screen and (max-width: 767px) {
  .header-actions-action--cart {
    margin-right: 10px !important;
  }
}

Change the value to move cart to the left until it meets your desired result

Hope it makes sense

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Yeah! Clear explaining makes a good solution

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.