Spacing within footer not constant.

shearerviljoen

Hey Guys,

wanted to find out how to sort out an issue I'm having with my footer. I've added a text block and a social block that both remain centred. On desktop, it appears exactly how I want it to, but on mobile, there is an added space between the two blocks.

1. How do I adjust for mobile to have the space remain the same as on desktop?
2. (this issue is not mentioned above) When a page is displayed and takes on the full screen with the footer revealed, how do I have the entire footer visible? Currently only the first line is visible until scrolling. The text block is 2 lines, and the social block counts for 1 line. So I'm hoping to have all lines visible on a standard view.

How it's displayed on desktop:

How it's displayed on mobile:

Example of how my footer is displayed on a page with full screen coverage:

Thanks in advance.

Shearer

Hikin' Mike

@shearerviljoen said:
Hey Guys,

wanted to find out how to sort out an issue I'm having with my footer. I've added a text block and a social block that both remain centred. On desktop, it appears exactly how I want it to, but on mobile, there is an added space between the two blocks.

1. How do I adjust for mobile to have the space remain the same as on desktop?

Add this to your Theme's CSS:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding: 0 !important;}

}

@shearerviljoen said:
2. (this issue is not mentioned above) When a page is displayed and takes on the full screen with the footer revealed, how do I have the entire footer visible? Currently only the first line is visible until scrolling. The text block is 2 lines, and the social block counts for 1 line. So I'm hoping to have all lines visible on a standard view.

I don't know if this the problem, but in your German text, the very last line you have an empty paragraph and a space. This is your last German line in code:

<h3>
    <span style="font-size: 12px;">
        Ich mag es, mit anderen Kreativen in Kontakt zu treten, ich trinke mehr Kaffee als ich sollte und bin vor allem &nbsp;bestrebt dauerhafte Beziehungen zu meinen Kunden auf der ganzen Welt aufzubauen.
    </span>
</h3>
<p><br /></p>

This is the empty space: <p><br /></p>.

shearerviljoen

Hey @Hikin' Mike

Add this to your Theme's CSS:

@media screen and (max-width: 736px) {

.sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding: 0 !important;}

}

Thank you, this did the trick.

I don't know if this the problem, but in your German text, the very last line you have an empty paragraph and a space. This is your last German line in code:

Ich mag es, mit anderen Kreativen in Kontakt zu treten, ich trinke mehr Kaffee als ich sollte und bin vor allem  bestrebt dauerhafte Beziehungen zu meinen Kunden auf der ganzen Welt aufzubauen.

This is the empty space:

.

Hey I didn't know you could speak German
Hmm let me try and be more clear with what I'm hoping to achieve here, as it has nothing to do with the text, but the page and the footer. (The HTML and CSS for my about page we'll get to, as I'm still trying to figure it out.)

My footer consists of 3 lines including the social icon, like this:

But when a full page is open that doesn't require any scrolling i.e my "About" page, the footer displayed at the bottom only reveals the top line unless I scroll.
Appears like this:

I am hoping to have the footer "snap" to the bottom line of the footer, and not the top line.
Like this:

I hope I'm making myself clear, please let me know if not

Thanks again Mike.

shearerviljoen

Oh wow, I still need to figure out how to quote what you said @Hikin' Mike. It looks terrible what I just tried to quote from your side. Haha I hope it's still readable.

Lille Ulven

I think I might have a solution for your problem @shearerviljoen
add this to the CSS of your about page (and if you don't want it valid for all pages turn it into a "this page only" change):
body{
flex-direction:column;
}

.sm-page-widget-footer{
margin-top:auto;
}

Keeping my fingers crossed that it does not only work in the Firefox preview

Good luck

Lille Ulven

Hikin' Mike

@shearerviljoen said:
Hey I didn't know you could speak German

I actually took a year of German in high school, but I failed. My youngest daughter is teaching herself German, so she read your About page.

My monitor isn't a large as yours, so I really can't help.

shearerviljoen

Hey @Lille Ulven. Thanks for the help but unfortunately did not work.

No worries @Hikin' Mike, I think I will just leave it as is as it's not a major issue. Big ups to your daughter, it's really not an easy language. Also started teaching myself 3 years ago, now I can order a beer confidently here in Germany
Speaking of beer, @Hikin' Mike do you have PayPal?

shearerviljoen

Sorry @Hikin' Mike, one more thing with the spacing of the social icon, the code you shared did work:

Add this to your Theme's CSS:

@media screen and (max-width: 736px) {

.sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding: 0 !important;}

}

It did work in making the space less than what it was before, but can it be reduced even more?

Currently looks like this on mobile:

I know I'm being a little picky on this one, but I'm hoping to have the spacing between the icon and text, exactly the same as the line spacing of the text.

Thanks.

Hikin' Mike

@shearerviljoen said:
Sorry @Hikin' Mike, one more thing with the spacing of the social icon, the code you shared did work:
It did work in making the space less than what it was before, but can it be reduced even more?

Currently looks like this on mobile:

I know I'm being a little picky on this one, but I'm hoping to have the spacing between the icon and text, exactly the same as the line spacing of the text.

Thanks.

Change this:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding: 0 !important;}

}

To include the Text Box:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-28095887 .sm-page-widget-content,
  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding: 0 !important;}

}

Hikin' Mike

@shearerviljoen said:
No worries @Hikin' Mike, I think I will just leave it as is as it's not a major issue. Big ups to your daughter, it's really not an easy language. Also started teaching myself 3 years ago, now I can order a beer confidently here in Germany
Speaking of beer, @Hikin' Mike do you have PayPal?

I'll let her know. It's tough for her to learn/speak it because very few speak German here.

Yes I have PayPal, mike@thebackcountry.org

shearerviljoen

@Hikin' Mike thank you so much. Worked like a charm.
Now, bottoms up!