Padding for Text

Visual Voodoo

I have two websites that I am trying to make look as one. The .Net version of my website is the Smugmug side (https://www.visualvoodoo.net).

Anyhow, at the very bottom of the page (https://www.visualvoodoo.net), I have a so called, Call To Action with some text that was created with CSS/HTML. It came out pretty good, except for the padding of the text on the left and right side of the page. I would like to see if anyone knows how to indent the text on the left and right side so that it looks more like the .Com version of my website (https://www.visualvoodoo.com). Any help or suggestions would be appreciated. Thanks.

Visual Voodoo

I should add that I have a background color added to the block (pure white). So if I try adding padding on the left and right with the ruler, all it does is push the background in as well as the text. Hope that makes sense to someone....

Hikin' Mike

Clear as mud. I'm not seeing any problem with your padding on your Call to Action....assuming it's your Contact Me button. I see your '.com' page is narrower then your '.net' though.

Visual Voodoo

Hi again Mike. Thanks for looking. Yes the text not the button...it's not much padding needed...I think the first image is smug mug side of site...

Hikin' Mike

I'm seeing this:

If you want to have your SM site like your WordPress site, you need to change the layout to stretchy with a width of 1400px.

Hikin' Mike

I see what you're talking about now, once I posted the screenshot. Add this to your HTML/CSS block:

.sm-page-widget-16729567 span {
    padding: 0 50px
    }

Visual Voodoo

Hi Mike.

We might be talking about two different things. Let me see if I understand what you mentioned above.

1) It appears that on your big screen, the wordpress side is narrower (like limited to 1400px). The smug mug side is going full wide. If that is the case...then yes I definitely want to fix that. Thanks for that heads-up. I went to Layout > Layout and Stretchy is already selected. I looked for a way of limiting width and could find anything. What I did see was Layout > Sections > Body Width but replacing Auto with 1400px didn't work out. Where would you make the site Stretch and limited to 1400px? I also looked in the Active Theme > Advance area but didn't see an option to change there.

2) I tried putting that code into the CSS box of the Call To Action CSS/HTML box and it didn't work so I tried to add it to the main Custom CSS area. That didn't work either. I was expecting to see the text get indented in a bit. Maybe this code is from the outside edge of screen to the side-header as that number is familiar to me. I set the Layout > Side Margins to 50px.

Thanks for helping....

Hikin' Mike

@Visual Voodoo said:
Hi Mike.

We might be talking about two different things. Let me see if I understand what you mentioned above.

1) It appears that on your big screen, the wordpress side is narrower (like limited to 1400px). The smug mug side is going full wide. If that is the case...then yes I definitely want to fix that. Thanks for that heads-up. I went to Layout > Layout and Stretchy is already selected. I looked for a way of limiting width and could find anything. What I did see was Layout > Sections > Body Width but replacing Auto with 1400px didn't work out. Where would you make the site Stretch and limited to 1400px? I also looked in the Active Theme > Advance area but didn't see an option to change there.

In your Entire Site > Layout > Stretchy. Then Layout > Sections > Header/Body/Footer Width '1400px'

Visual Voodoo

I tried that Mike. Site breaks. 1400 is out of those parameters. It will take 140 but not 1400.

Hikin' Mike

Forgot that you have a sidebar. I don't and I limit mine at 1175px.

Visual Voodoo

If I got rid of the 50px on the sides...full width...do you think it would be better or easier to match?

Hikin' Mike

I still don't understand why you're not able to change the Header/Body/Footer sections.

Hikin' Mike

@Visual Voodoo said:
If I got rid of the 50px on the sides...full width...do you think it would be better or easier to match?

Just thinking. You don't need the margins if you set your Layout to 1400px. Remove the margins and I think it (adding 1400px) should work.

Visual Voodoo

I tried it Mike...I got rid of the margins

Visual Voodoo

1180 is the maximum number...Ok...I chatted with tech support. Unfortunately if you select stretch....it will fill the browser window. If you limit both wordpress and smugmug to 1180, then the two sites still looked different...smugmug side still looks like it has the 50px margins on both sides and wordpress does not. So it seems that the best solution is to set smugmug to Stretchy and set wordpress to it's maximum width: 1920px. This way for most screens I think it will work...I think....or in theory. I just have a 12" laptop. How does it look now on your screen Mike? Better? Thanks for bringing this up as this was an important factor for my site...looking like one site.

Hikin' Mike

They look pretty close to me. When I made my SM the same as my Wp site, I had to do some minor adjustments even though both were set at 1175px. I just tweaked the SM to match my WP site. Specifically my header/log/nav was different then my WP site, so I made the changes in my SM site to match.

Unrelated, but your Smugmug link doesn't work. You typed in 'https' and it should be 'http://www.visualvoodoo.net/'.

Visual Voodoo

Thanks for pointing that out about site width. I got hooked up to a big screen today to make the repairs. I think it's close now.

Yeah you are right Mike. I type fast so I didn't catch that https thing. It applies to the .com not the .net