CODEWITHSUNDEEP
htmltextresponsive
stefan
stefan

Reputation: 11

Make Text Responsive html

I need help: this specific text on my website is giving me a problem. It looks great on desktops and tablets but it looks too big on mobile.

I wanted to know how I could edit the code so that it resizes to look a litte smaller when someone uses a mobile.

Here is my website.
The text on my website that I am talking about is "What if you could pay once for a beautiful website? You can with Us. Just A One Time Fee, No Strings Attached. Choose your package below so we can start right away."

Follows my code: 

<span style="font-size: 17pt;">
    <span style="color: #ff0000;"><em>What if you could pay once for a beautiful website?</em></span>
    You can with Us. <strong>Just A One Time Fee, No Strings Attached</strong>.
    Choose your package below so we can start right away.
    <img class="alignnone wp-image-518" src="http://www.phincer.com/wp-content/uploads/2016/10/1477055136_happy.png" alt="1477055136_happy" width="55" height="55" />
</span>

Upvotes: 1

Views: 4591

Answers (3)

shishir
shishir

Reputation: 851

You may try using media queries to add responsive text according to the device you are using. For example, try adding this inside your CSS stylesheet, you may change the width(currently 320px) for the device.

@media only screen and (max-width: 320px){
        body{
            font-size: 12em;
        }
    }

More Reading about media query

Upvotes: 0

Rajesh Kumar
Rajesh Kumar

Reputation: 878

Change the font size. how much you want.

@media(max-width:400px){
  .responsive-text{
       font-size:14px;
      }
    }


<span class="responsive-text" style="font-size: 17pt;">
<span style="color: #ff0000;"><em>What if you could pay once for a beautiful website?</em></span>
You can with Us. 
<strong>Just A One Time Fee, No Strings Attached</strong>
. Choose your package below so we can start right away.   <img class="alignnone wp-image-518" src="http://www.phincer.com/wp-content/uploads/2016/10/1477055136_happy.png" alt="1477055136_happy" width="55" height="55" /></span>

Upvotes: 1

Ricardo Rocha
Ricardo Rocha

Reputation: 16216

Check out this page:

Font size can use different unit of measures to declare how big your text should be - pixels (px), points (pt), EMs (em), and percent (%) in the example code above it uses percent.

Follows an example:

p{font-size:120%;}

Also, you can check this website for getting the sizes of the devices, provide a more accurate media queries to distinguish how css you should use on each device.

Upvotes: 0

Related Questions