Screen Size

  • [Moderator note: Please think of a better thread title in future]

    I am doing a website for my Dad and on different size screens it appears different which is ok but dependent on the screen size some words will be split with hyphens.

    I am guessing this is a pretty common and simple fix but its my first time using wordpress.

    https://www.kentsolutionsltd.co.uk that’s the link to the website please try and view on different size screen.

    I am currently using a 15 inch laptop and the words are hyphend but when on a 22 inch it appears fine.

    please help and thanks in advance!

    Joe

Viewing 9 replies - 1 through 9 (of 9 total)
  • thebigtine

    (@josephbydesign)

    Change:

    .entry-content {
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	word-wrap: break-word;
}

    to:

    .entry-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: break-word;
}
    Thread Starter joeykent21

    (@joeykent21)

    thank you will this also work from tablets and mobile devices?

    Cheers!

    thebigtine

    (@josephbydesign)

    yep, same for all.

    Thread Starter joeykent21

    (@joeykent21)

    thank you! it seems to have worked for the monitors but not from a phone ( I am using an iPhone)

    what is the coding language used? may just get a book instead of keep asking on here.

    Thank you ??

    thebigtine

    (@josephbydesign)

    it appears you haven’t changed anything yet. The code is still the same.

    Thread Starter joeykent21

    (@joeykent21)

    how would I change this? I have currently done it in the CSS is this wrong?

    Cheers

    thebigtine

    (@josephbydesign)

    Ok so in your style.css of the twentythirteen theme change the following:

    on line 1124 change:

    .entry-content {
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	word-wrap: break-word;
}

    to:

    .entry-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: break-word;
}

    and on line 2451 change:

    .widget {
	background-color: rgba(247, 245, 231, 0.7);
	font-size: 14px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0 0 24px;
	padding: 20px;
	word-wrap: break-word;
}

    to:

    .widget {
	background-color: rgba(247, 245, 231, 0.7);
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	margin: 0 0 24px;
	padding: 20px;
	word-wrap: break-word;
}

    So basicly you are changing anywhere it says hyphens: auto; to hyphens: none;. CSS is correct, it just looks like you changed .entry-content > article instead of just .entry-content. It would of needed changing anyway ??

    Hope that helps

    m

    (@greeninthemiddle)

    Hi,
    I’ve added the code that josephbydesign mentioned in my Simple Custom CSS but it doesn’t seem to work. I still get hyphens when the screen size changes.

    .entry-content {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    word-wrap: break-word;
    }

    thebigtine

    (@josephbydesign)

    Hi,

    I just checked the link and all is working.

    See screenshot here: https://pasteboard.co/24g2uNoY.png
    and here: https://pasteboard.co/24gdfK9G.png

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Screen Size’ is closed to new replies.