Modify position of shopping cart icon (mobile view only)

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!!!

 

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