[Support request] Footer padding/margin

[Garth Dryland]

Hey Tom.

I have two sites (see below) and both have developed an issue with the footer area.

The padding (possibly margin) has changed for some reason. Its like as if there’s approx 40px set somewhere but I cant find to adjust. I say this because the setting is set to 40px and yet the widget text is positioned like the setting is 0px

The issue appears to be most obvious under 769px however the footer padding has also changed above that size from what it use to be originally, maybe by 20px or thereabouts.

I can only assume its to do with a feature/addition to GP

I haven’t made changes that could have altered this on both of my sites. I haven’t altered layout in months.

I believe this happened about 3-4 weeks ago.

The sites are here and here

Oh also the mobile menu on ddw site use to be centered throughout and while the css appears to be intact its not working so the menu currently sits on the left.

Any ideas what these things might be related too.

Cheers

[Tom]

I’m not seeing any issues on either site?

The footer on mobile looks normal: https://www.screencast.com/t/ZPnHz4IWgc1k
The mobile menu is centered: https://www.screencast.com/t/Z3SY9KWt

Did you resolve these issues maybe?

[Garth Dryland]

Tom

Re your first screenshot if you scroll up a bit you will see the footer padding differs from content padding.
They use to be positioned the same. This goes for both sites respectively.

On DDW site you can see currently the footer appears to be about 50px padding whereas the content has approx 30px. They should both be 30px.

As far as accountwise is concerned that footer should be 12px in mobile view. Currently its like 60px. In desktop view padding should be 30px.

Re the menu screenshot. Sure the main menu link is centered but all the actual site links are set to the left. whereas they all use to be centered.

I got some CSS from you to do this at one stage (about 6-12 months ago) but for some reason i cant find that thread in the forum. Having said that I haven’t changed any CSS for months.

Hope you get what I mean now.

Cheers

[Tom]

What’s your footer widget area padding set to in Customize > Layout > Footer?

Try this for centering:

@media (max-width: 768px) {
    .main-navigation .main-nav li {
        text-align: center !important;
    }
}

[Garth Dryland]

Okay first of all the CSS above fixed the alignment issue. The CSS below is what I had
Not sure why this stopped working ??

@media (max-width: 768px) {
	#mobile-header, #mobile-header ul ul {
		text-align: center;
	}
	
	.menu-item-has-children .dropdown-menu-toggle, nav ul ul .menu-item-has-children .dropdown-menu-toggle {
		float: none;
	}
}

Secondly, the Customize > Layout > Footer is set to 40 left and right. 50 top and bottom

If if wasn’t for the additional CSS below the text would be up against what should be the edge of the container despite the setting of 40px.
Therefore if I remove the CSS below or set it to zero the text sits hard left up against the edge of the viewport regardless of the 40px set in the customizer > layout > footer. If I set the 40px in customizer > layout > footer to zero the text slides left past the edge of the viewport like under the window frame as such.

/*
Tweaks to Default Element Padding Setting for Footer Widgets
*/
#text-2 {
	padding: 0 22px;
}

#text-3 {
	padding: 0 22px;
}

#text-4 {
	padding: 0 22px;
}

#text-5 {
	padding: 0 22px;
}

Its like the main footer container is 80px wider than the content container.

Hope that helps

Cheers

[Tom]

The mobile CSS was tweaked a little which could have caused your CSS to stop working.

Not sure I understand? That custom CSS shouldn’t be necessary. For example, this site we’re on right now is just using the Customizer options, and the footer widgets aren’t​ right up against the container.

Have you tried removing that custom CSS and clearing your browser cache?

[Garth Dryland]

Okay

I tried dropping cache yesterday and it didn’t help.
Following your reply I removed the custom CSS and it sort of helped. It corrected one of two main issues.

I can get the mobile view to look as I intended it too but when the site has a viewport above the main container size to footer seems to grow bigger than the main container and or it looses padding/margin or something.

If you view the DDW site with the text up against the padding and the padding up against the container you will see the text (bar the title and navigation link arrows) all line up whereas if you make the page wider than the main container size the footer text moves further outwards.

For example the text moves to the left about 15px more than its intended too to leaving it sitting approx in line with the titles and link arrows as opposed to the main text content and the contact form fields as previously mentioned.

Not sure why this is happening though I could potentially fix this by increasing the footer padding (making it larger than the content padding but aligning text despite this) and then using an @media for mobile setting however I would think the footer should match the content as it should match the header width from the main container setting otherwise it makes formatting less than ideal so logic suggests something must be up with it.

Cheers

[Tom]

Can show me a screenshot of what you mean? Looking at it right now I’m seeing default behavior.

[Garth Dryland]

Here you go

Check the caption or file names for reference to previous post. The footer text is in a different position.

I would assume and pretty sure it was previously that the container size was consistent throughout the header, content and footer.

IE if the contianer size is set to 1200px the header, content and footer areas max width should be 1200px when you have set to contain the header, content and footer areas as opposed to setting them to full width.

Hope so see what I mean.

[Tom]

I’m sorry, I’m still not seeing the issue.. Maybe highlight the area I’m supposed to be looking at?

[Garth Dryland]

Okay I have altered the original images to include a line of reference.

I have however found another issue which may be part of the problem i’m having though they appear to be separate issues to me.

Check the new images mobile, tablet and desktop and you will see the padding adjustment is operating the opposite side of the page.

Can you recreate that?

Cheers

[Garth Dryland]

Tom

I have just added another couple of images showing the setting of 75px for the footer (check file names for 75px setting).

While the area works in a moderate sized desktop view down to mobile view yet it doesn’t in a full desktop view. This looks like its part of my problem.

Do you see what I mean ?

[Tom]

The column inside your content has 15px padding, which is why it’s not lining up. If that 15px is removed, then it would line up perfectly.

As far as I’m seeing while playing with your website and viewing the screenshots, everything is working exactly as it should.

You’ve added more padding to the left of the content, and the screenshots are showing padding on the left side as they should.

[Garth Dryland]

Look at the desktop view image.

Its clearly showing padding on the right of 100px despite being set on the left setting. While the right side setting of 20px is showing on the left side of the page. Something has to be up with that or I must have lost my marbles otherwise lol especially since when I test the same principal using the mobile padding setting it does the opposite which is in fact how it should behave. Left settings move the left side and so forth.

Its like when the viewport/window is large the settings which should be applied to the left appear to either vanish or are being applied to the right side not the left side. This potentially has some correlation as to why the footer text sits approx 15px to far to the left when the settings in customiser say otherwise.

It appears this issue impacts the main content padding/settings but not the mobile content padding/setting.

I also don’t know where you’re getting the 15px setting from on my site when playing around with it because to my knowledge none of my content padding settings are, nor have ever been 15px. If you mean the content inset/indent, that is intentional and not what i’m referring too. I adjusted that as I have stated below with the additional footer padding size increasing that area by 13px over and above the 20px making 33px.

Padding setings are either 20px (which is correct – refer title and or navigation links where possible) or in the case of the footer they are 33px so the text matches the indent/inset content text above and the contact form fields.

This use to all work too. I had it formatted as I am suggesting it should be. Something changed in the mean time and it wasn’t changed within my sites (i noticed it about two months ago maybe more). I also have two sites doing the same thing and both have different padding settings and layouts yet both are showing the same problem. Given this it seems to me its likely something in the theme is the cause of the problem.

I hope you see what i mean now.

PS: I added a green tick and red cross to the original two images to show which is right and which isn’t.

[Tom]

Ah, that content padding looks like a bug within Sections. It doesn’t apply to regular pages. Funny, that hasn’t changed in a long time, seems like an old bug. Fixed in the next version. Thanks!

As for the column padding, you can see the 15px added here: https://www.screencast.com/t/QRdrpe907YV

It’s added for equal spacing between columns.

[Author]

Posts