How can I make the logo appear "better" in the Rocked theme (mobile view)

Hey guys, I just had a quick question if someone could help?

I’m using the “Rocked” theme and everything looks great on my mac/windows laptop.

But then when I view the site on MOBILE, the logo is way too big and has no padding on the left or right (it touches the sides of the screen).

Then also, when viewing on a TABLET, the logo is the right size but has no padding on the left. It’s touching the very left of the screen.

If anyone can help with this, I’d really appreciate it :slight_smile:

Thanks in advance for any help!
Martie

HI Martie,

To help me provide better solution for this, I need to inspect directly the logo on your website. Can you share a link to your website here?

Regards,
Kharis
aThemes Support

Is there no way to help without this at all?

Just I have a coming soon page on this site as it hasn’t been launched yet.

But the same thing happens with every logo I try, and have not edited anything to do with the menu in regards to size / padding / etc… if that helps?

Thanks for your help Kharis! :slight_smile:

Hi,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 600px) {
      .site-logo {
        max-width: 80%;
      }
    }

I hope that helps.

Regards,
Kharis
aThemes Support

Worked perfectly again Kharis, thanks!

Could you give me the CSS to use for the “tablet” mobile view. Basically I just need to add a little padding to the left side of the logo (but only on tablet view… computer, and mobile phone view are both fine)

Thanks again Kharis,
Martie

Hi Martie,

Glad to hear the code worked.

To add more padding on mobile screen size, add this CSS code:

    @media only screen and (max-width: 600px) {
      .site-branding {
        padding-left: 15px;
      }
    }

Regards,
Kharis
aThemes Support

Perfect, thanks man! :slight_smile:

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support