Skip to main content
davidhelp
Inspiring
February 26, 2018
Answered

How to view page text so it resizes to fit inside a cell phone screen?

  • February 26, 2018
  • 1 reply
  • 1327 views

Hello

I have a test I am doing that has a header, footer, left column (where the menu goes) and a right column (where the page content goes).

It does not fit in the screen of a cell phone very well when zooming in to read the text.

Does this layout ever do and if so how to make it readable so the text can be zoomed without the whole page expanding.

Right now I zoom in and drag the page around to read it.

See link for test page.

http://davidswebsite.com/test

Click on: 2_column_test.html or layout.css

David

    This topic has been closed for replies.
    Correct answer BenPleysier

    For a responsive web site, you need to make it fluid.

    1. change #wrapper1 width: 960px; to max-width: 960px

    2. replace .image1 and image2 with

    img.fluid {

    display: block;

    width: 100%;

    }

    and change the class of image1 and image2 to fluid and remove the height dimension as in

    <img src="firefox_quantum.jpg" width="643" class="fluid">

    There are also a few errors in the page, ie. no start BODY tag and a rogue </p>. david gif is not enclosed in double quotes are some of the ones that I have noticed.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 26, 2018

    For a responsive web site, you need to make it fluid.

    1. change #wrapper1 width: 960px; to max-width: 960px

    2. replace .image1 and image2 with

    img.fluid {

    display: block;

    width: 100%;

    }

    and change the class of image1 and image2 to fluid and remove the height dimension as in

    <img src="firefox_quantum.jpg" width="643" class="fluid">

    There are also a few errors in the page, ie. no start BODY tag and a rogue </p>. david gif is not enclosed in double quotes are some of the ones that I have noticed.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    davidhelp
    davidhelpAuthor
    Inspiring
    February 26, 2018

    Thanks

    I added what you said. The content column would shrink so I added min-width:760 along max-width: 960px to #wrapper1

    The webpage is not centered in the cell phone screen but is on my computer.

    Any fix for that?

    I found that I could change the size of the image by changing the % with what you suggested

    img.fluid {

    display: block;

    width: 100%;

    }

    The The W3C Markup Validation Service shows no errors for html and css after what you had me add.

    Thanks

    BenPleysier
    Community Expert
    Community Expert
    February 26, 2018

    /*  Wraps around title */

        #masthead {

            width:100%;

        }    

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!