previously in <HEAD> it was
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> As you can see issue in screenShots that I have attached below.. there was issue of UI break so then I have updated <HEAD> with following code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" /> But Still issue is there
Web page works well with resolution of 1280 X 800 as you can look at this image
these 3 columns (with black vertical line separated) are the <td> inside that a container with fixed width in px, and I cant change it to % due to some limitations. only main container have width : 100%, (Main container: with full page width behind all page content-with white BG)
I have attached screen shots of issues with screen resolution
On 1024 X 768
As you can see On browser with ratio 1024 X 768 "mobile image" is going beyond White box(Main container)
on 1920 X 1080
Here browser ratio is 1920 X 1080 and main container (White box) is 100% of width but those three columns (<TD>) are not, all three width remains same as previous images and main container is 100%
Update: Code link https://jsfiddle.net/p6x6jsgt/3/
5 Answers
Answers 1
The problem is not your meta viewport tag. After having read all the comments here are a couple solutions to your problem:
A non-optimal solution:
Keep the table layout, change to percentage widths and use text blocks with white-space:nowrap; and <br> hard-coded line breaks with different font sizes depending on device screen size.
- About the layout:
Your .preview-panel has a fixed width in rem. To solve this, make the following changes:
.preview-panel { background-size:100% auto; width:100%; } Now you will notice layout issues with the other td. That's because you have to set them to percentage widths, for example:
.template-editor { width:100%; } .template-editor td { width:33%; } - About the text blocks:
You said setting widths to percentages would mess up your text blocks. Well, unfortunately there's no magical solution for this and all you can do about it (with your current layout) is to add this to whatever text block you put in there:
.foo { white-space:nowrap; } You would also have to fix your line breaks with <br> like so:
Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit.<br> Fusce pulvinar aliquet luctus. You could make the line breaks responsive if you wanted to, with something like (HTML):
<span class="line-break"></span> (CSS):
.line-break { display:block; } Then you'd have the opportunity to set different font sizes on your media queries, and you could also hide the purposeful line-breaks with display:none;. This is, in my opinion, a better solution than plain old <br>.
With this, your layout should look better in all devices. That being said, this is still a poor solution and an entirely different approach is necessary, in my opinion.
A better solution:
Use flex or maybe just floated items, but not a table when your layout essentially is not a table. You have three panels, why would you forcefully use a table layout for that? Here's an example with flex:
.container { display:flex; align-items:stretch; justify-content:center; } .container__panel { flex-grow:1; height:600px; border:1px solid black; }<div class="container"> <div class="container__panel"></div> <div class="container__panel"></div> <div class="container__panel"></div> </div>Disclaimer: the weird container__panel is BEM notation: http://getbem.com/introduction/
Answers 2
Add
td{ width: 33%; } For dividing the columns equally ,
Remove width css from the below class so that it can adjust width according to parent class (i have commented the code which i have removed from css)
#cardListHolder { padding-top: 0.4375rem; /*width: 21.5625rem;*/ } .edit-card .inner { margin: auto; padding: 0 2.1875rem; /* width: 18.75rem;*/ } .preview-panel { background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0; height: 26.25rem; margin: auto; padding: 3.4375rem 0.8125rem 0; /* width: 13.3125rem;*/ } Just try replacing this whole css with your css. I hope this will fix your issue.
*, *::before, *::after { box-sizing: border-box; } ul { list-style: outside none none; margin: 0; } .sectional-content { background: #f6f6f6; color: #222; cursor: auto; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-style: normal; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; position: relative; } .wrapper { min-height: 100%; position: relative; } .centered-container { margin-left: auto; margin-right: auto; width: 96.6667%; padding-left: 0.3125rem; padding-right: 0.3125rem; position: relative; } .tabs-content { background: #fff none repeat scroll 0 0; border: 1px solid red; margin-top: -1px; padding: 1.5625rem; margin-bottom: 0; width: 100%; } .divider1 { height: 18px; } .template-editor { background: #fff none repeat scroll 0 0; border: 0 none; margin-bottom: 1.25rem; table-layout: auto; } .template-editor tr { background: transparent none repeat scroll 0 0 !important; } td{ width: 33%; } .add-remove-template, .edit-card { padding-top: 5px !important; vertical-align: top; } .add-remove-template { border-left: 0 none; padding-left: 0 !important; padding-right: 0 !important; vertical-align: top; } table tr th, table tr td { color: #222; font-size: 0.875rem; padding: 0.5625rem 0.625rem; text-align: left; } #cardListHolder { padding-top: 0.4375rem; } .preview-template, .edit-card { border-left: 2px solid #808285; padding: 0 1.875rem !important; vertical-align: top; } .edit-card .inner { margin: auto; padding: 0 2.1875rem; } .preview-panel { background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0; height: 26.25rem; margin: auto; padding: 3.4375rem 0.8125rem 0; } Answers 3
I think you want something like this it fits it self in every resolution.
.section { box-sizing: border-box; padding: 0 16px; width: 33%; float: left; } .scroll-container { height: 360px; overflow-y: auto; border-right: 1px solid black; } .edit-card { height: 360px; border-right: 1px solid black; } .preview-panel img { width: 100%; max-width: 250px; }<div class="content"> <div class="section scroll-container" style="height: 360px"> <ul id="cardListHolder"> <li></li> </ul> </div> <div class="section edit-card"> <p> edit something </p> </div> <div class="section preview-panel"> <img src="http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png"/> </div> </div>Answers 4
May be over-looking here... Have you tried using media queries to resolve this? See if this link is any good. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
Of course it would mean alot more coding to get it to work fluently and changes will need to be done.
And have you also used the text-align: center; attribute in your css for the text paragraphs in your columns,rather than "setting it perfectly" to align correctly on all three columns followed of course by removing/setting the white space.
From what i can see, i think this may solve your answer.
Answers 5
Remove the defined width you have given in
#cardListHolder { padding-top: 0.4375rem; width: 21.5625rem; }
and in
.edit-card .inner { margin: auto; padding: 0 2.1875rem; width: 18.75rem; }
and use
th,td{ width: 33%; }
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> *, *::before, *::after { box-sizing: border-box; } ul { list-style: outside none none; margin: 0; } .sectional-content{ background: #f6f6f6; color: #222; cursor: auto; font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; font-style: normal; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; position: relative; } .wrapper { min-height: 100%; position: relative; } .centered-container{ margin-left: auto; margin-right: auto; width: 96.6667%; padding-left: 0.3125rem; padding-right: 0.3125rem; position: relative; } .tabs-content { background: #fff none repeat scroll 0 0; border: 1px solid red; margin-top: -1px; padding: 1.5625rem; margin-bottom: 0; width: 100%; } .divider1{ height: 18px; } .template-editor { background: #fff none repeat scroll 0 0; border: 0 none; margin-bottom: 1.25rem; table-layout: auto; } .template-editor tr { background: transparent none repeat scroll 0 0 !important; position:relative; } .add-remove-template, .edit-card { padding-top: 5px !important; vertical-align: top; } .add-remove-template { border-left: 0 none; padding-left: 0 !important; padding-right: 0 !important; vertical-align: top; } table tr th, table tr td { color: #222; font-size: 0.875rem; padding: 0.5625rem 0.625rem; text-align: left; } #cardListHolder { padding-top: 0.4375rem; } .preview-template, .edit-card { border-left: 2px solid #808285; padding: 0 1.875rem !important; vertical-align: top; } .edit-card .inner { margin: auto; padding: 0 2.1875rem; } .preview-panel { background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0; height: 26.25rem; margin: auto; padding: 3.4375rem 0.8125rem 0; width: 13.3125rem; } th,td{ width: 33%; } </style> </head> <body> <div class="sectional-content"> <div class="wrapper"> <div class="centered-container"> <div class="tabs-content"> <div class="divider1"></div> <table class="template-editor" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="add-remove-template"> <div class="scroll-container" style="height: 360px"> <ul id="cardListHolder"> <li></li> </ul> </div> </td> <td class="edit-card"> <div class="inner"> </div> </td> <td class="preview-template"> <div class="preview-panel"> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
0 comments:
Post a Comment