Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Centering text body to bottom center of the screen

I'm not allowing a scrolling function, the background will be static, but i'm finding it difficult getting the passages to stick to the very center-bottom of the screen. any ideas on how to fix it? Text alignment in general is a bit of a fuss, especially after i try to adjust the line-height

here's the code i'm working with

#passages {
margin-left: 0px;
margin-right: 0;
padding-left: 0px;
border: none;
text-align: bottom;
}

.passage { max-width: 350px;
background-color: transparent;
text-align: justify;
font-size: 13px;
margin-left: auto;
margin-right: auto;
}

Comments

  • Which Format? Which Version of TWINE? (I'm assuming Twine 2.*x)
  • edited October 2016
    First. Please, use the code tag when posting code (C on the editor bar).

    mochacream wrote: »
    I'm not allowing a scrolling function, the background will be static, but i'm finding it difficult getting the passages to stick to the very center-bottom of the screen. any ideas on how to fix it?
    Have you changed the default margins or padding of the body? Is the UI bar visible and, if so, have you changed its default dimensions, margins, or padding?

    The answers to those will affect the solution.

    Gryphbear wrote: »
    Which Format? Which Version of TWINE? (I'm assuming Twine 2.*x)
    Based solely on the category and tags used by mochacream, I'd say: SugarCube v1.x and Twine 2.x.
  • edited October 2016
    Actually, for now I'll just assume that you haven't changed the default styling of the body element or UI bar in the ways I mentioned above. Going on that assumption, and what I think you want, something like the following SugarCube v1 styles should do what you need:
    body {
    	margin: 0;
    }
    #passages {
    	bottom: 3.5%;
    	left: 15.5em;
    	margin: 0;
    	position: absolute;
    	width: calc(100% - 15.5em)
    }
    .passage {
    	font-size: 13px;
    	margin-left: auto; 
    	margin-right: auto;
    	max-width: 350px;
    }
    .passage .content {
    	text-align: justify;
    }
    
    @media screen and (max-width: 1440px) {
    	#passages {
    		margin: 0;
    	}
    }
    @media screen and (max-width: 1136px) {
    	body {
    		margin: 0;
    	}
    	#passages {
    		left: 14.5em;
    		width: calc(100% - 14.5em)
    	}
    }
    @media screen and (max-width: 800px) {
    	body {
    		margin: 0;
    	}
    	#passages {
    		left: 0;
    		margin: 0;
    		width: 100%;
    	}
    }
    
  • Oh, I've removed the UI bar with
    #ui-bar {
    	display: none;
    }
    

    i dont mind scrapping the rest of the code, because getting this right is important, but would removing the ui bar change anything?
  • mochacream wrote: »
    Oh, I've removed the UI bar […]
    That would have been handy to know beforehand. Oh well, it's not a huge deal.

    mochacream wrote: »
    […] would removing the ui bar change anything?
    If you mean, would the UI bar being hidden have consequences for the code I gave previously, then the answer is yes—the horizontal centering could be off by roughly the width of the UI bar.

    Here's an updated version of the SugarCube v1 style which requires the UI bar to be hidden—and includes a rule to do so: (Twine 2: goes in Story Stylesheet; Twine 1: goes in stylesheet-tagged passage)
    body {
    	margin: 0;
    }
    #ui-bar {
    	display: none;
    }
    #passages {
    	bottom: 3.5%;
    	margin: 0;
    	position: absolute;
    	width: 100%;
    }
    .passage {
    	font-size: 13px;
    	margin-left: auto; 
    	margin-right: auto;
    	max-width: 350px;
    }
    .passage .content {
    	text-align: justify;
    }
    
    @media screen and (max-width: 1440px) {
    	#passages {
    		margin: 0;
    	}
    }
    @media screen and (max-width: 1136px) {
    	body {
    		margin: 0;
    	}
    }
    @media screen and (max-width: 800px) {
    	body {
    		margin: 0;
    	}
    	#passages {
    		margin: 0;
    		width: 100%;
    	}
    }
    
  • Oh, thank you so much!!
    I really appreciate all your help.
Sign In or Register to comment.