Highlighted

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

Participant ,
Feb 25, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

553

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Feb 25, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

554

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 25, 2018 0
Adobe Community Professional ,
Feb 25, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0
Participant ,
Feb 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0
Adobe Community Professional ,
Feb 25, 2018

Copy link to clipboard

Copied

/*  Wraps around title */

    #masthead {

        width:100%;

    }    


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0
Participant ,
Feb 25, 2018

Copy link to clipboard

Copied

Thanks, that worked. I temporarily made the width smaller to 500px so it would fit and saw that the page is now centered.

I switched back to 960px for computer screen.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0
Adobe Community Professional ,
Feb 26, 2018

Copy link to clipboard

Copied

davidhelp  wrote

I temporarily made the width smaller to 500px so it would fit...

You have no idea what sized screen your end users have.  Many mobile phones in portrait mode are only about 320 px wide and 480 px wide in landscape.   Use % and don't box yourself in too much with pixels.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2018 0
Adobe Community Professional ,
Feb 26, 2018

Copy link to clipboard

Copied

hmmm... instead of % for device width , in correlation with a responsive aspect, I will most recommand using vw unit... and if directly use in a query then em will be fine too... but each one of us approach responsive in a different way as I can figure out... any way if it can help

<length> - CSS | MDN

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2018 0
Participant ,
Feb 26, 2018

Copy link to clipboard

Copied

I made a change to #wrapper1

max-width: 960px to max-width: 62% <- this is close to the 960px width I had before.

min-width: 500px  <- this in pixels as a % collapses the page content too much.

Shows up on my LG G3 / 5.5" screen resolution 1440 x 2560px. Smaller phone users will have to wait till I can move the menu on top.

The page content can be zoomed in to make it an easy read while the menu is off the screen.

I will work on a more mobile friendly version of the test page.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2018 0
Adobe Community Professional ,
Feb 26, 2018

Copy link to clipboard

Copied

you should avoid thinking in pixels ... because it will mislead you (sooner or later) ... for example you announce that 62% corresponds to about 960px that you had with the old settings ... and here on the screen that I use it occupies 1190px ... so everything is relative to the screen you use.
try to think in readability ... for example if a block occupies a width (whatever its value) what is important is that if this width contains text ... how will there be characters per line (of course according to the size of the font used ...) all this in order to have lines that remain fully legible regardless of the screen ...
imagine a line occupying 960px and the same text this time stretching over 1200 px ????

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2018 0
Adobe Community Professional ,
Feb 26, 2018

Copy link to clipboard

Copied

I resize the all pictures to fit to a large average screnn width on this forum... but you will get the idea

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2018 0
Participant ,
Mar 02, 2018

Copy link to clipboard

Copied

Hello

I found these pages that explains responsive design from W3 Schools if others need to look at examples.

Now I will see if I understand them by redoing my test page    :  )

HTML Responsive Web Design

Tryit Editor v3.5

Tryit Editor v3.5

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2018 0