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.
Click on: 2_column_test.html or layout.css
David
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.
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.
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
Copy link to clipboard
Copied
/* Wraps around title */
#masthead {
width:100%;
}
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.
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.
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
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.
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 ????
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
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 : )