ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Joyn
• November 10, 2015 at 5:36 pm #227555
  danpal

  Member

  Post count: 32

  Hi,

  Is there an easy way to reduce the page width? I was able to create what I wanted by increasing the horizontal padding on a column using the Swift Page Builder. I want the mobile version to display full width without the extra padding. Do I need an @media tag to do this?

  Here’s the page: http://highpulp.com/blank

  Thanks!

  November 11, 2015 at 11:35 am #227709
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Add the code below to your custom css option.

  @media only screen and (max-width: 767px){
  .spb-asset-content {
      margin-top: 0!important;
      margin-bottom: 0!important;
      padding-left: 0%!important;
      padding-right: 0%!important;
    }
  }

  Hope it helps.

  -Rui

  November 11, 2015 at 10:25 pm #228007
  danpal

  Member

  Post count: 32

  That worked! Thank you so much.

  November 12, 2015 at 8:49 am #228067
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Great thanks to Rui.
  Mohammad

  November 16, 2015 at 9:08 pm #229188
  danpal

  Member

  Post count: 32

  After testing on the iPhone, I noticed that the homepage and blog posts were being affected by the custom CSS Rui gave me. Do I need a more specific selector so it only affects the page?

  Here’s the new URL so you can see on mobile: http://highpulp.com/trusttheprocess. Everything looks fine.

  Now visit the homepage: http://highpulp.com and this blog post: http://highpulp.com/2015/trust-the-process-case-study

  The text should have some margins/padding on the left and right. Hope this makes sense.

  November 17, 2015 at 5:38 pm #229452
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Each page has a unique class with it’s id, so you can use that page-id-14657 ex:

  @media only screen and (max-width: 767px){
  .page-id-14657 .spb-asset-content {
      margin-top: 0!important;
      margin-bottom: 0!important;
      padding-left: 0%!important;
      padding-right: 0%!important;
    }
  }

  Thanks,
  David.

  November 17, 2015 at 8:19 pm #229483
  danpal

  Member

  Post count: 32

  Thanks David. That worked.

  For some reason, the text and images on all of my blog posts are showing up aligned to the left on mobile version. There’s no margin or padding.

  Here’s an example post: http://highpulp.com/2015/trust-the-process-case-study

  You can see what I’m talking about when you open it in your mobile browser.

  November 19, 2015 at 11:41 am #229869
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Yes I see that also, please add this CSS:

  @media only screen and (max-width: 767px) {
  .single-post .content-left, .single-post .left-sidebar {
      padding-left: 15px;
  }
  }

  Thanks,
  David.

  November 19, 2015 at 5:06 pm #230008
  danpal

  Member

  Post count: 32

  Thanks David! That worked.

  November 19, 2015 at 5:14 pm #230012
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Great thanks to David 🙂 .
  Mohammad

• Back to forum

  Posted in: Joyn