Support » Themes and Templates » HTML Text Box Width

  • Resolved DJPT

    (@djpt)


    I am having trouble changing the width of a HTML text box widget that I have on the homepage of a WordPress site. The box in question is the one that is titled “Welcome to Penistone FM” here.

    The CSS that I have changed is as follows, the width change works in Firefox, but not in any versions of Internet Explorer. Annoyingly, the “Welcome to Penistone FM” shows on two lines in Internet Explorer too, but is all on one line in Firefox (I want it to be all on one line).

    .home-top-right
    {
    	float:left;
    	margin:0 0 0 10px;
    	padding:22px 0 0;
    	width:320px;
    }

    Any ideas what I can do to sort this?

    I have recently taken over looking after the site so it was not designed by me. Some of the coding is a bit sloppy to say the least and I am hoping to sort it!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    For CSS-specific issues, consider CSS-specific forums.

    How that line appears is totally dependent on the space available in a given browser — which is partially dependent on the user’s settings. It shows up on two lines in Firefox for me. So you can’t really control it entirely, but the easiest way would be to make the font smaller — here:

    #home-top .home-top-right h4 {
        color: #444444;
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 10px;
        padding: 0;
    }

    Thread Starter DJPT

    (@djpt)

    Thanks – are your sure it depends on the space available?

    I have Internet Explorer open here on a 32” screen with the resolution set to 1024×768 and “Welcome to Penistone FM” still shows on two lines, even though there is plenty of space. I have a much smaller screen at home and Firefox shows it on one line.

    It seems bizarre that the width option is there but has no effect. Could there be some other script in WordPress, maybe functions.php, that is over-riding the size, or is there any way I can stop the width being dependent on the space available as you mentioned?

    Try changing the width or the font size — either change puts it on one line. There is nothing else going on. The width is set in the CSS code for that element (which you posted above) — it has nothing to do with the size of the browser window or anything else. The font size can be changed by the user — so that’s what I meant by you only have limited control over that. The default browser settings may be different between your machines, and there may also still be difference in how IE deals with spacing (margins, padding, etc.)

    If you are not using it, I’d strongly recommend using Firebug to work with CSS issues — it allows you to test various changes to see the effect on the page without making them in the actual code.

    Thread Starter DJPT

    (@djpt)

    Thanks WPyogi, you’ve been a great help – really appreciate it 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘HTML Text Box Width’ is closed to new replies.