• Resolved shemicaallen

    (@shemicaallen)


    I was working on my website last night and everything was fine. As of this morning 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://personalizedlearningforall.com/. Any help would be greatly appreciated. I do not know what to do.

Viewing 13 replies - 1 through 13 (of 13 total)
  • 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-learn-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

    Jason King

    (@jasoncharlesstuartking)

    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.

    Thread Starter shemicaallen

    (@shemicaallen)

    @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://personalizedlearningforall.com/

    This is bugging me!!!

    Thread Starter shemicaallen

    (@shemicaallen)

    @jason King thank you for responding.

    Here is the link to my site

    http://personalizedlearningforall.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 morning it was changed.

    Thread Starter shemicaallen

    (@shemicaallen)

    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.

    Thread Starter shemicaallen

    (@shemicaallen)

    @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.

    Jason King

    (@jasoncharlesstuartking)

    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.

    Thread Starter shemicaallen

    (@shemicaallen)

    @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.

    Thread Starter shemicaallen

    (@shemicaallen)

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

    Thread Starter shemicaallen

    (@shemicaallen)

    @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

    Jason King

    (@jasoncharlesstuartking)

    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.

    Thread Starter shemicaallen

    (@shemicaallen)

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

    Jason King

    (@jasoncharlesstuartking)

    My pleasure.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Website Appearance’ is closed to new replies.