Mobile - logo and social icon issues and padding

Sarah_Semicolon

Hi, I am having a few issues with my mobile version.

Removing social icons-
I would like to remove the social icons on mobile view, but when I do this it pushes the logo to the left (visual attached). The header is set to 'One line, logo centred'.

Padding-
My second issue is that I cannot seem to change the padding on boxes so I am getting some very tight columns of type. Is there a way that I can open up the padding on these boxes for mobile mode? I have tried amending the padding in the Design Options in Column Settings but it doesn't seem to work. Any ideas?

Many thanks,
Sarah

Air

Hello there Sarah!

Sarah_Semicolon said: Removing social icons-
I would like to remove the social icons on mobile view, but when I do this it pushes the logo to the left (visual attached). The header is set to 'One line, logo centred'.

Hell how are you removing them? Cause when I disable them with theme option
Customizing ▸ Header settings▸ Type, variant, background▸ Social icons - display it on mobiles ▸ Disable, then It works fine for me.

With kind regards.

Daniel

Hello Sarah

Ill try to help you with second question

Sarah_Semicolon said: Padding-
My second issue is that I cannot seem to change the padding on boxes so I am getting some very tight columns of type. Is there a way that I can open up the padding on these boxes for mobile mode? I have tried amending the padding in the Design Options in Column Settings but it doesn't seem to work. Any ideas?

It wont work for a columns paddings. You must edit the "Custom Heading" elements.
Please check the screenshot: http://nimb.ws/H90SZW and change the paddings from 100px to 50px (or less)

With Regards
Daniel

Sarah_Semicolon

Thanks both for your help. Daniel your fix worked a treat - thank you!

But I still can't seem to get the logo to centre on mobile layout. I turned off the social icons in the way suggested by customising the header settings but I am still getting the logo far off to the left. If I set heading style to the other options, it pushes it within the frame, but is still to the left and not centred.

Any ideas for what else I could try?

My site is www.littlebitmargate.com

Thanks in advance,
Sarah

Air

I think it maybe caused by lack of any menu item or tool(icon).

Could you enable header 'One line, logo centred', and also enable Search option :
Customizing ▸ Header settings ▸ Tools icons - general ▸ Search

With kind regards.

Sarah_Semicolon

Hi Air,

That has centred the logo which is great but now the search icon (and social icons on tablet view) don't seem to be aligning on the middle line with the logo. They are higher up (screenshot attached). Is there a way to have these aligned in the same way as they are on the desktop site?

Also ideally I could disable the search icon on mobile view as it crowds the logo a bit. Is there a way to do this?

Many thanks,
Sarah

Air

It is all caused by lack of any menu on your site :-) I think I didn't account for such situation, and this cause this bad behavior.

OK lets fix it other way.

Disable search if you don't use it, disable socials on mobile.
Next add such custom CSS:

@media only screen and (max-width: 600px) {
    .header-type-one_line .head {
        display: table;
    }
}

It will fix centering on mobile :-)

With kind regards.

Sarah_Semicolon

Amazing! Thank you SO MUCH for all of your help. That is working perfectly now.