SOLVED

Where does left padding on landing page come from

Go to solution
Jutta_Stienen2
Level 1

Where does left padding on landing page come from

Hi

I'm using Mkt LP templates and have created several LP's which get embedded into our website. For some reason there always seems to be some padding on the left. The page should left align under the title. When I open the LP in preview, I can see that there is some left padding, too. I copied the css style sheet and tried to figure out where the padding comes from, removed any padding I thought could be causing it and uploaded the css sheet into Mkt.

Where does the padding come from, and how can I remove it?

For example:

LP: http://go.volarisgroup.com/50-Years.html

Embedded: 50 Years of Competence in Public Transport

style sheet original: //templates.marketo.net/template7/css/bootstrap.css

Thanks!

Juco

1 ACCEPTED SOLUTION

Accepted Solutions
Gerard_Donnell4
Level 10

Re: Where does left padding on landing page come from

Here is a screenshot with the fix inline:

Screen Shot 2018-01-30 at 14.40.07.png

View solution in original post

10 REPLIES 10
SanfordWhiteman
Level 10 - Community Moderator

Re: Where does left padding on landing page come from

Please move to Products​ (this isn't a support space, it's for webmaster feedback about the Jive platform). Move link at the right.

Gerard_Donnell4
Level 10

Re: Where does left padding on landing page come from

Hi Jutta Stienen​,

Can you provide a mock up of what you are actually trying to achieve?

I looked at the code and it seems there are a inline styles which are applying left padding and left alignment.

Thanks,

Gerard

Jutta_Stienen2
Level 1

Re: Where does left padding on landing page come from

Hi Gerard

Can you have a look at this: http://go.volarisgroup.com/rs/430-MBX-989/images/TRP-mockup-MKTCommunity.png

The embedded page should left align with the header of the website "50 Years of Competence...."

Thank you!

Juco

Dan_Stevens_
Level 10 - Champion Alumni

Re: Where does left padding on landing page come from

can you include an inline screenshot - or better yet, a link to the page?  Your link to the image doesn’t open for me.

Jutta_Stienen2
Level 1

Re: Where does left padding on landing page come from

TRP-mockup-MKTCommunity.png

Hi Dan

This is the page: 50 Years of Competence in Public Transport

Thanks

Juco

Gerard_Donnell4
Level 10

Re: Where does left padding on landing page come from

Hi Jutta Stienen​,

The issue is that your landing page is not as wide as the bootstrap container that you are adding it into.  Each Section has a container which has margin left and right set to auto in order to centre anything that is added into it. 

You will need to override that style with an inline style or create an other class with !important attributes attached to it.

Example:

<div class="container" style="margin-left:0 !important; margin-right:0 !important;">

This is the style causing the padding.

Line 1579 in your bootstrap file: http://go.volarisgroup.com/rs/430-MBX-989/images/bootstrap_50y.css

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

Thanks,

Gerard

Gerard_Donnell4
Level 10

Re: Where does left padding on landing page come from

Here is a screenshot with the fix inline:

Screen Shot 2018-01-30 at 14.40.07.png

Jutta_Stienen2
Level 1

Re: Where does left padding on landing page come from

Gerard, thank you so much! Can I apply this to all LP's to force the left align?

Gerard_Donnell4
Level 10

Re: Where does left padding on landing page come from

Hi Jutta Stienen​,

Is it only these pages that are using the /bootstrap_50y.css ​ file?  Is so you could remove the margin auto on that section and see what effect it has on those pages.  Don't forget to check it in mobile and table view as well.  This would have a global effect and update everything in one go.  The alternative is to give all of the containers in the sections that you are adding a brand new class and add the over-riding style there.  This will mean manually updating all of the other pages.

I hope that helps.

Thanks,

Gerard