Inspiring

Answered

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

Forum|Forum|7 years ago
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.

BenPleysier

Correct answer

Community Expert

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!

davidhelpAuthor

Inspiring

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

/* 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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded