How to move logo to the left on mobile?

I’m having the same issue and none of the above code options are working.

My logo is still centered on mobile between the left edge of the phone and the burger menu icon, when I need it to flush left with the rest of my content below, so like 1-2% margin from the left edge of the phone.

Here’s a screenshot:
https://drive.google.com/file/d/1qC0psaFVjyy26NzzoQwwuOfurKrcusLp/view?usp=sharing

If it’s helpful to know, I have and SVG logo and here is some code I’ve already applied to it:

.responsive .logo img {
min-width: 355px;
right: auto !important;
left: -20px;
}

@media only screen and (max-width: 767px) {
#top .logo img {
width: auto !important;
height: 100px;
}}

Could someone please help me?

Thank you!

–Steph

Hi Rikard! Sorry for the delay.

My site is pioneerautocredit.com

Looking forward to your help!!

Hi,

I’m having the same problem as Sclark91. The logo is svg and the code I have at the moment is

.responsive .logo img {
    min-width: 120px;
    padding: 0px 0;
}

This code enables the svg logo in the first place – found it on one of the threads.

The problem is that in the mobile view, the logo is centered and I want it on the left side. I have tried the code suggested above and it didn’t work. The only code I got it to work even a bit was:

@media only screen and (max-width: 767px){
.responsive .logo img {
margin-left: -100px;
}}

This is a workaround since the logo is not “aligned” correctly so depending on the screen size, the logo isn’t always on the left hand side. Any ideas how to fix?

@Sclark91 – his logo is a svg-logo – that is the point. If you see his edited logo now here : https://webers-testseite.de/Pioneer-Final-Logos_RGB-Green-03.svg and pull the screen height to smaller sizes – you see that it is shrinking to the left side of the screen. On default a svg does that center center.
The trick is to add this to the “head” section of the svg: preserveAspectRatio="xMinYMid meet"

@cloaker : your logo is a svg file too – you can influence the shrink behavior by adding some code to the svg itself. See above
Open in a good text-editor ( mac f.e. Sublime Text on win: notepad++) your logo. You will see on top a similar code.
Insert on that place ( with space between the surrounded code ) : preserveAspectRatio="xMinYMid meet"
xMinYMid means that on horizontal align it is minimized to the left – and vertical align it is centered
( pay attention the x is small letter – Y is with big letters )

PS: good text-editors do not insert or add meta infos to the texts. They do what they had to do and nothing else. ( in oposite to word ;) )

PPS: then you can forget about the negative margins – get rid of all that stuff – and see if there might be small adjustments – e.g. if your svg has a lot of space around the path in it.

PPPS: :) if your svg is generated in Illustrator : i do change the default classes to something else – because if you got more than one svg on that page and refill a path by its class – all .st1 etc. pp will be influenced. So to stay unique i do change it to something meaningfull. and different to “st” nomenklatura.