logo image location adjustment

today I installed quickstart storefront template: http://www.ahgoobaby.com/Redesign.

See the logo on desktop view (I'm using Chrome browser); there is too much left margin. Then see the logo on mobile portrait; it is too big and pushes the hamburger menu icon down that doubles the black horizontal bar.

Is there a way to get logo image to left align regardless of whether it is desktop, or mobile (both portrait and landscape)?

Is there a way to put a separate logo image for mobile portrait / phone?

Reducing the logo size will be too small for desktop, so for if to keep mobile from appearing too large I need to reduce the logo size, I will need instructions to override the mobile logo image to a separate smaller image I can upload while using the desktop and tablet versions as the larger one.

If it goes to logo size on small screens:

Code: Select all

@media (max-width: 430px) {
   #gkLogo {max-width: 80%;}
   #gkLogo img {max-width: 100%;}
}


should help.
If it goes to left padding - logo image stares exactly at same point where menu above starts. You have some spacing in image file itself - perhaps this is what you need to remove?

Thanks. Specifically, where do i put in that code and if it is overriding anything, what else might I need to do to ensure that everything is toggled correctly to allow for that overriding?

Separately, with regard to the left padding, attached is my current (regular sized) logo. You will see that it is cropped as tightly to the left and right of the artwork as I can. But when in desktop (at least in Chrome) the logo does not appear to be centered properly between the black to left of the logo / left of the template and the black to the right of the logo/ to the left of the HOME menu item.

Is there a way to move the starting location of where the logo is dropped for each of the responsive screens so that I can adjust each to get them all to appear as desired?

Could you please mark this "lack of alignment" on a screenshot?

here is a screen shot of what I mean. it is on desktop chrome latest version. See the black to the left and to the right. You will see there is slightly more black to the left than there is to the right but my logo is cropped exactly at the left and right edge of the logo (see prior attachment in this post). As well, you will see from the module position above the logo that the "orders list" text is neither centered to the logo or left aligned to the logo. Either would be acceptable without impacting the mobile.

I'm sorry but I completely doesn't understand and cant see this issue. Could you please create 2 screenshots - one with current state and one with desired state?