Skip to main content
R
Rodney0D45
Participant
November 1, 2020
Answered

enlarging text

  • November 1, 2020
  • 4 replies
  • 1256 views

I wanted to enlarge my text so that people using their cell phones could read it easily. I had already added code <meta name=" "viewport”" content="”width=device-width," initial-scale="1?" />so that users could see a more mobile-friendly version, but still, I wanted the users to see a much bigger font when they opened the pages. I dragged over text and chose XXL size, but the more I did that, the longer and longer it took for my program to respond, and it was taxing the processor because my laptop fan was running all the time. Any reasons and solutions? 

 

      This topic has been closed for replies.
      Correct answer BenPleysier

      Try

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      4 replies

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      November 1, 2020

      I do not see a reason for having larger fonts for handheld devices than for desktop devices. I think that both should be the same. This is opposed to large headings where the heading may be too large for handheld devices.

       

       

      For more on responsive headings see https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design/

       

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        O
        osgood_
        Legend
        November 1, 2020

        I do not see a reason for having larger fonts for handheld devices than for desktop devices

         

        Using 'responsive' text is not hugley controllable because you are letting the browser determined the size rather than visually assessing the size in comparison to the overall design and components around the text in larger and smaller devices. As I said in my first post, some developers are less 'picky' than others when it comes to visual styling, prefering to concentrate on fast-turnaround rather than the aesthetics.

         

        There's a better example of a RFS gif at the link below (scroll down to about the middle of the page): The one on code-pen is deliberately set at a small max-width of only 540px which makes the technique look better than what it really is.

        https://medium.com/@wanjarunkel/using-bootstraps-new-responsive-font-sizes-feature-57abacd595ac 

         

        To me the heading at the large window size width is far too big but it looks ok at the smaller window width. You don't really have much control unless you use a dedicated media query in my opinion. Sure it takes longer but the result are reflective.

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        November 1, 2020

        prefering to concentrate on fast-turnaround rather than the aesthetics

         

        Not sure what the relevance is. Please elaborate.

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        November 1, 2020

        Scalable Fonts.  Save code in a new document and preview on real devices.

         

        <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rescale Fonts to Fit Any Screen Size</title>

<style>
body {
font-family: 
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
color:#FFF;
font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
.container {
width:80%;
margin:0 auto;
background:rgba(0,0,0,0.5);
padding:2% 4%;
}
/* Special Rules for Desktops */
@media only screen and (min-width: 1024px) {
body {
color:brown;
font-size: calc(14px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
}/* end media query */
</style>
</head>
<body>
<div class="container">
<h1>Scalable Text</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum similique, dolores enim quam provident, deserunt tempora molestias. Nisi laboriosam quam dolor, officia magni error? Sint nihil dolore debitis doloremque.</p>

<ul>Unordered List
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

<ol>Ordered List
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</div>
</body>
</html>

         

         

        If DW is taxing your CPU, which DW ver & OS are you using?

        Is your code clean & free of errors?

        https://validator.w3.org/

        https://jigsaw.w3.org/css-validator/

         

        Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        November 1, 2020

        You should be using media queries to set larger sized text for mobile devices, if they become too small on those devices.

         

        /* Desktop */

        body {

        font-size: 14px;

        }

         

        /* Upscale font for mobile devices */

        @217338screen and (max-width: 768px) {

        body {

        font-size: 18px;

        }

        }

         

        Headings may not need to be upscaled on mobile devices, unless you're picky, like myself - it's going to be mostly the small body text.

         

        Obviously if you have set your pargraph tag for desktop to a specific size (which will account for the majority of the small text on your website)  you will need to upscale that for smaller devices:

         

        /* Desktop */

         

        p {

        font-size: 14px;

        }

         

         

        /* Upscale font for mobile devices */

        @217338screen and (max-width: 768px) {

        p {

        font-size: 16px;

        }

        }

        BenPleysier
        Community Expert
        BenPleysierCommunity ExpertCorrect answer
        Community Expert
        November 1, 2020

        Try

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          R
          Rodney0D45Author
          Participant
          November 11, 2020

          Thank you for all the responses. Media queries seemed to be the best advice, but I could not get it to work for me. Ben's advice seems to be working with no annoying center horizontal line.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices