Jason King on "Website Appearance"

I was working on my website last night and everything was fine. As of this moing the site is enlarged or magnified. The words are three times bigger than they need to be and running off the page. It is like the site has been zoomed in.

Is this something in the coding? I am new to using Word Press and CSS.

Also I would like to customize the Site Title & tag line in the Stylesheet but I have no idea how to do that.

The link to my site is http://personalizedleaingforall.com/. Any help would be greatly appreciated. I do not know what to do.

Hi shemicaallen. The magnification sounds like a browser issue. Is the browser view set at something other than 100%? To change your title and tagline you would use a child theme or a plugin like https://wordpress.org/plugins/simple-css/ or https://wordpress.org/plugins/custom-css-js/. The site title is using an id of "site-title" and the tagline uses the class "site-description". So your CSS would look something like this:

/* put a comment here */
#site-title { some CSS code here;
}
/* put a comment here */
.site-description { some CSS code here;
}

Here are a couple of CSS tutorials:
http://webdesign.tutsplus.com/tutorials/the-best-way-to-lea-css--webdesign-11906
http://www.htmldog.com/guides/css/beginner/

To locate the different element IDs and classes on your page you can use a browser inspection tool. You activate this with a right-click in the browser window and select "Inspect". Here's a tutorial on Chrome's Developer Tools; other browsers have something similar:
https://developer.chrome.com/devtools

There's code in the CSS that sets body text size to 40px:

body, button, input, select, textarea { color: #777777; font-family: 'Arial', sans-serif; font-size: 40px; line-height: 3.0;
}

If you're making changes to directly the original theme's CSS, you should read about "child themes" and why you should use one instead.

@bdbrown thank you for responding. I have made all the CSS changes I needed but I am still having the enlarging/magnification issue. I have looked at my site using Chrome, IE, and on cell phone using Safari. They are all the same.

Here is the link to my site

http://personalizedleaingforall.com/

This is bugging me!!!

@Jason King thank you for responding.

Here is the link to my site

http://personalizedleaingforall.com/

I have reached out to ThemeGrill. I am using the free version of the Esteem theme.

I do not know what changed in the CSS to make everything enlarged. When I logged off last night everything was fine and when I logged back in this moing it was changed.

I am using a Custom CSS plugin to change anything. It is on my Dashboard and the Customizier. What ever changed I did not do. I did not make any changes to the CSS until about 2 hours ago and that has only been the site title and tag line.

@jason king I checked the CSS code for what you set. That is exactly what is in the orginial CSS code. There have been no changes. I think it a a bug with the theme.

40px seems rather large for default body size.

I looked at the demo for the Esteem theme - http://demo.themegrill.com/esteem/ - and it does not have that code in it.

Temporarily deactivate the Custom CSS plugin. Does that fix it? If so, reactivate and you'll find the problem in its code.

@jason king I took away all the CSS changes I made and deactivated the CSS plugin. The site title and tag line went back to default but the magnification is still there.

@jason king thank you. I added come custom CSS with the code you sent me and changed the 40 font size. It worked!!!

@jasonking what is the code or what do I need to look for in the original CSS to center the promo box primary and secondary slogans? Thanks

Instead of telling you the answer, I'll explain how to figure it out yourself.

In whichever browser you use, right click on the appropriate part of your website then choose Inspect. This is a hugely useful tool, lets you poke around in any website's html and css code to figure out how it's put together.

On the left side you'll see HTML. Click on the tag (probably a DIV) that's called (something like) promo box. On the right you'll see the CSS that affects that element. If there's a lot of CSS, filter for what you're looking for.

You might find this CSS useful:

text-align: center;

Have fun.

All changed. Thanks for all your help Jason!!!

My pleasure.