Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
lotusinhand

How to add padding on top of logo in Polaris in mobile

Question

Site URL: http://lotusinhand.com

Hi guys,

Am trying to add some white space on top of my logo in mobile mode. Right now my logo is stuck on the top of the page and I would like it to be a bit further down like it is in desktop mode. The template I am using is Polaris.

I tried adding customs CSS like the following:

@media screen and (max-width: 768px) {
  #page {
    padding-top: 100px;
  }
}
@media screen and (max-width: 600px) {
  #page {
    margin-top: 100px;
  }
}

But so far none of these have worked. Do you guys know what CSS code I can use to accomplish this?

Thanks!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

It looks good on my end. Can you post a screen shot?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hi rwp,

Here is a screenshot of what I see. I want the logo to be further down and for there to be some blank space above it. Thanks for replying!

105666550_589236058398033_2476088855680507100_n.jpg

Share this post


Link to post
  • 0
8 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


a.Mobile-bar-branding {
    margin-top: 20px;
}

 

Worked like a charm. Thank you so much!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...