How to move text to bottom of screen for mobile?

Ken Weber

I'm a new user so I apologize if this topic has already been addressed but I could not find it with a search. I contacted the SmugMug Heros support team and they could not help me, I was told to post my question in this forum for a possible solution.

I added some copyright text to the bottom of my website but when viewed on a mobile phone it shows up in the middle of the screen on the Home page. Is there some CSS code I can add to move this text it to the bottom of the Home page for mobile?

For reference my website is kweberphoto.com and I attached a screen shot of the Home page on an iPhone which shows the copyright text in the middle of the screen.

Thanks,
Ken Weber

IlyaVishnyakov

Ken Weber wrote: »

I'm a new user so I apologize if this topic has already been addressed but I could not find it with a search. I contacted the SmugMug Heros support team and they could not help me, I was told to post my question in this forum for a possible solution.

I added some copyright text to the bottom of my website but when viewed on a mobile phone it shows up in the middle of the screen on the Home page. Is there some CSS code I can add to move this text it to the bottom of the Home page for mobile?

For reference my website is kweberphoto.com and I attached a screen shot of the Home page on an iPhone which shows the copyright text in the middle of the screen.

Thanks,
Ken Weber

Is the text currently placed in the body of the page or is it in the footer?

Ken Weber

I added the copyright line to the text box at the very bottom of the page so I think it is in the footer.

IlyaVishnyakov

Ken Weber wrote: »

I added the copyright line to the text box at the very bottom of the page so I think it is in the footer.

The problem is - your home page has no content in the body of the page, just the background slideshow, header and footer. It is not inherently bad, it looks good on desktop, however, it seems on mobile the responsive design of smugmug pages moves the footer up due to the lack of content in the body of the page.

You can solve this problem by adding an empty content block in the body of the page. It will take up space and keep footer in the bottom of the screen on mobile.

There is a standard empty content block called "Spacer", you can find it under "Design" category. You can adjust its height but it will remain fixed regardless of mobile screen resolution.

You can also drop an HTML content block and copy the following code under HTML tab:

<div id="my-content"></div>

And the following code under CSS tab:

div {
height:25vh;
}

This code will create an empty content block which will take up 25% of browser window height. You can play with the value "25vh" until it fits the mobile screen. This content block will not have a fixed height and will scale according to mobile screen size. So on an older iPhone 5s screen it will take less space than on iPhone 7 screen.

You can also change "vh" for "vw", then it will adjust according to the width of the browser window.

Ken Weber

Thanks for the feedback. I tried adding the HTML content block and copied the code into the HTML and CSS tabs. This moved the copyright text down however after a certain percentage (13vh) the text did not move down anymore it only made the home page image larger on the screen when holding my iPhone in the vertical or portrait orientation. The same thing happened when I increased the "vw" value beyond a certain percentage (5vw) when holding my iPhone in the horizontal or landscape orientation. So I adjusted the "vh" and "vw" values to place the copyright text in the location which looks good to me in both orientations. I'll have to look at other types of phones to see how it appears and make additional adjustments if necessary.

photoclick

Homepage > Layout > "Full Height". Is it On or Off ?

Ken Weber

Homepage > Layout > Full Height is On. I tried turning it Off but don't see any difference from what I described above in my previous post.