Horizontal padding for a one-column page

[Hilcandoit]

I'm concerned about text line length on my site's homepage and looking for the best way to create some horizontal padding without changing my theme.

The homepage has just one column because there isn't enough text to create two columns without that seeming really awkward. It's essentially a portfolio site, with the homepage functioning as an introductory "portal."  I don't want the lines to be too long for readability, so I've found a sort of workaround using spacers, but I wonder if there's a better way to do this by editing the code for this page only.

My fix for the moment:

I've inserted Weebly's regular vertical spacers on either side of a central column and adjusted their heights such that they function as horizontal spacers. This feels rather inexact, though, since the "central column" is not actually one element but a stack of three: a title element, a text element, then an image, then another text element. So I have to re-insert the spacers after the image, and there's no failsafe way to align them with the previous set.

I want the image where it is w/ respect to the text, so moving the image isn't a solution. (It's actually a set of 3 images, which I exported from InDesign as one entity after I became too exasperated trying to make them align nicely using the Site Editor.)

I would be OK with all this the way it is, but it looks pretty awful in mobile view. The image is teeny tiny and there's a ginormous space before and after it.

Final note: I've put the rest of the site into PW-protected mode while I do open-heart surgery on it, so there's a little disclaimer at the top of the homepage that will be deleted when I'm finished.

Site URL is https://www.hilcandoit.com/

Advice appreciated. I have gone into the code before and am not afraid, as long as I have explicit instructions.

[bobafett]

@Hilcandoit:  I have seen many postss from you about some customization here and some there.  It is rather difficult to do that becasue all themes are little different and it takes time.  I don't know about others, but I do not like to give free coding advice for private money making websites.

Here is a suggestion for your though.  You may want to download web Inspector tool for chrome.  You can inspect all elements on your web page and see what css properties are defined.  It will even tell you the line numbers.  There are also free on line tutorials to get you started.

[Hilcandoit]

Thanks, Boba Fett, but I don't know enough about code or CSS for the Web Inspector tool to be helpful.

I wouldn't call this a money-making website—I have yet to make a dime from it. At $35 a month, it's very much in the "debit" column. I'm just a F/T job seeker hoping to make some survival money from freelance work.

[Adam7]

It's possible to make CSS changes for a specific page by adding CSS rules to that page's Header Code field. Something along these lines, for example:

<style>
.main-wrap
{
padding-left: 100px !important;
padding-right: 100px !important;
}
</style>

I don't know if that's the appropriate element class for that page, but that would give a padding of 100 pixels on either side of an HTML element with the class of main-wrap. It won't show in the editor but would work on the live site.

[Hilcandoit]

Thank you, Adam.

I suppose I may need a "pro" to help me with that, and I may not bother—at least not until I'm finished with revisions on the other pages.

Meanwhile, though, for the sake of clarity:

When you say I could add CSS rules to that page's Header Code field, are you talking about altering the code for a given header type, meaning one of these guys (in pic)?

Or is this a change I would make somewhere in the mysterious land of "main_style.css"?

Even though I can't "do code" at this time, I do wanna have my terminology straight.

thanks again.

[Adam7 · Accepted solution]

That's ok! By "page's heaer code" I mean go to the Pages tab, select the page, then click SEO Options. It's functions the same as the Header Code field in Settings > SEO, except it only displays on that page instead of the whole site.

[Hilcandoit]

Oh! I would never have thought to go there. Thank you!

[Adam7]

That's ok! It's just tucked in there when you need it.