Issues moving text using “line-height”

  • Hey all,

    Im not the greatest with HTML and CSS so bear with me. At the bottom of my site, https://www.brettsalyer.com, I have a “Hosted by raspberry pi” at the bottom, along with an image. I cannot seem to get the text I have to align to center of the image to the right of it. I can shift the text left and right, as well as downwards with line-height but I cannot seem to get it to shift up. This is the CSS I am currently using for my image and text:

    .site-info {
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 1em;
}

.site-info img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.site-info p {
	text-align: right;
	line-height: -50px;
}
    • This topic was modified 7 years, 9 months ago by brettsalyer.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t quite understand what you mean by aligning the text to the centre & to the right. Can you re-word this?

    Thread Starter brettsalyer

    (@brettsalyer)

    By that I mean I want my text to appear to the right of the Raspberry Pi logo,but also centered with the logo. Meaning, I dont want it above the logo or below the logo. I want it to sit just to the right of the logo so that it has the same amount of distance from the top of the logo, as does to the bottom of the logo. Center. Does that make sense?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think so. How was that text added? It needs to be surrounded in a span tag so that you can target it in CSS, i.e.:

    
<div class="site-info">
    <p align="right">
        <img src="..." alt="..." />
        <span class="hosted-by"> Hosted by ... </span>
    </p>
</div>

    Then try using this Custom CSS:

    
.site-info img,
.site-info .hosted-by {
    display: inline-block;
}

.site-info img {
    margin-right: 0;
}

.site-info .hosted-by {
    position: relative;
    top: -35px;
}

    Add it to the “Additional CSS” part of the dashboard:
    https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    • This reply was modified 7 years, 9 months ago by Andrew Nevins.
    Thread Starter brettsalyer

    (@brettsalyer)

    The text was simply added by editing the php file where “Proudly powered by WordPress” resides. If I recall correctly, that file was not accessible from within WordPress. I had to SSH into my server and use nano to edit the php file from there. I just added the text you see at the bottom of my page. But this should help lots. Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You should be able to edit that file via a Child Theme by replicating the directory structure (‘/template-parts/footer/site-info.php) inside the Child Theme directory. Then editing the ‘site-info.php’ file from within your Child Theme.

    If you haven’t set up a Child Theme then I recommend doing that first: https://codex.www.ads-software.com/Child_Themes

    Otherwise you run the risk of losing your work when the theme or WordPress core updates.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Issues moving text using “line-height”’ is closed to new replies.