CODEWITHSUNDEEP
wordpresstext
aatalyk
aatalyk

Reputation: 391

Plain text in Wordpress website looks bad running on mobile device

Recently I built website on Wordpress.com but my first text looks bad in mobile device the address is codecamp.kz. What is the problem?

enter image description here

<h1 style="text-align:center;">НАУЧИСЬ ПРОГРАММИРОВАТЬ НА iOS С НУЛЯ</h1>
<h3 class="r"></h3>
<div style="text-align:center;"><a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSfLVUls_4LAE-Gte_90wCHLwWulCS3N8aUix6mDZiw0XZFePQ/viewform">Подать заявку</a></div>

Upvotes: 1

Views: 199

Answers (2)

alexwc_
alexwc_

Reputation: 1603

You'll need to use media queries to size your text correctly. Also, that empty <h3> should probably be deleted. There are some odd &nbsp in the title - perhaps WordPress is putting those in?

Media queries will allow you to apply different styling based on different parameters: width, height, orientation, pixel density, etc... Here are some helpful starter notes.

Here's an example of media queries:

/* the following rules will only apply when the browser width is between the following widths. You can change the min/max widths to suit your needs. */
@media all and (min-width: 640px) and (max-width:1280px) {
  h1 {
    font-size:16px; /* or whatever size and unit */
    font-size:1.6rem; /* or whatever size and unit */
    }
}

/* OR */

@media screen and (orientation: landscape) {
 .element {
    font-size:26px; /* or whatever size and unit */
    font-size:2.6rem; /* or whatever size and unit */
 }
}

Also, here are some media queries for standard devices.

Upvotes: 0

xWaZzo
xWaZzo

Reputation: 758

I think the problem is that the browser detects your text as one word and browser interprets it shouldn't be broken.

You don't need media queries for this, instead you only need one css rule:

h1 {
    word-break: break-word;
}

Solution 2

For extra points! On your html you probably have something like:

{НАУЧИСЬ&nbsp;ПРОГРАММИРОВАТЬ&nbsp;НА iOS С&nbsp;НУЛЯ}

Just remove the &nbsp; and that should do the trick.

My example: enter image description here

Hope this is useful.

Edit Added an image of the result.

Upvotes: 1

Related Questions