Jump to content
TNG Community
Urbie47

Margin teplate 15 in Chrome browser

Recommended Posts

Urbie47

After being dormant for a while i upgraded from TNG version 9 to  11 and choosed template 15. Looked wonderfull and i decided for the full monty, 
Version 12.03 and again for template 15. But now in the Chrome-browser text and pictures are positioned tightly against the left bezel and that is very efficient but doesn't
 look good. My CSS skills, never been excellent, are still sleeping, can't find a lead  In Internet Explorer and on a tablet there is a small margin. 
What can i do to get that margin in Chrome.  Thanks

main.jpg

Share this post


Link to post
Share on other sites
theKiwi

What is the URL to your site to see this page?

Roger

Share this post


Link to post
Share on other sites
theKiwi

I think the problem is the widths of the images on the page - if I make your page the complete full width of my MacBook Pro 13 screen then I see a clear border on the left, but otherwise if the window is at all narrower, then there's no border on the left.

The main image is specified as 750px wide and the two under it are each 360px wide.

If you made all of them a bit narrower you'll probably see the border on the left.

Roger

Share this post


Link to post
Share on other sites
XerxX

Hi Ben,

You don't have to do anything but widen or narrow your browser a few pixels:

This is a 1247 pixels wide browser (Chrome but the brand doesn't matter) - a white margin left and right:

chrome1247.jpg

This is a 1213 pixels wide browser - no margin:

chrome1213.jpg

This is an 1137 pixels wide browser - the margin re-appear:

chrome1137.jpg

Hope this explains things.

Erik

 

Share this post


Link to post
Share on other sites
Newfloridian

Would be better to declare the widths as percentages rather than as fixed measurements. The images would then expand and collapse in proportion to the page or column that contain them.

Alan

Share this post


Link to post
Share on other sites
XerxX

Alan, and all,

The images are only fixed sized when the browser is 1140 pixels wide or more.

See my posted images above: The bottom image shows a narrower Main Image than the top image.

See also templatestyle.css for template #15.

Regards,

Erik

Share this post


Link to post
Share on other sites
theKiwi
8 hours ago, XerxX said:

Hi Ben,

You don't have to do anything but widen or narrow your browser a few pixels:

This is a 1247 pixels wide browser (Chrome but the brand doesn't matter) - a white margin left and right:

chrome1247.jpg

This is a 1213 pixels wide browser - no margin:

chrome1213.jpg

This is an 1137 pixels wide browser - the margin re-appear:

chrome1137.jpg

Hope this explains things.

Erik

 

Yes, but at the narrower window size, the left margin appears at the expense of chopping the right side off the main image

This is 1140px

image.png

 

This is 1138 pix - a wide left margin has appeared, but the right edge of the image is chopped off

 

image.png

 

Roger

Share this post


Link to post
Share on other sites
Newfloridian

Why would you want to restrict the size of images (or columns for that matter) on screen resolutions greater than 1140 px? I code and view my own site at 1920 px on a 24 inch monitor. I have a recommendation to readers on my home page for viewing at a resolution of 1680 x 1050 or above. This situation smacks of the early days of TNG when the main page was restricted to a width of 780px which was designed to fit into a screen resolution of 800 x 600. I doubt there are many monitors using that these days.

I suppose I did make a recommendation of using width percentages rather than fixed width images (or columns) which may be at variance to some template designs.  I threw out fixed width designs with TNG7 - recoding using the 'Holy Grail Liquid' or fluid design which combines xhtml with css. I based this on template 4. Actually this was before TNG's own responsive mods and my own displayed quite fine in standard mode (not mobile mode) on my tablet and on my Samsung Galaxy smart phone in both portrait or (in preference) landscape orientation.

I'm not sure I would want to try and understand templatestyle.css for template 15 (and yes, I do have a copy)

The 'Holy Grail' 3 column Liquid Layout (Pixel-widths)

Alan

Share this post


Link to post
Share on other sites
XerxX

Roger,

Yes it's chopped there but continue to decrease the width and I believe it will come back. And the image is resized. Ultimately the design is re-arranged also.

The chopping seems to be a "glitch" within a range of browserwidths. Try it: Slowly decrease the browserwidth down to the narrowest (prob @ 320 pix).

 

Alan,

The design of the index page for template #15 is only like 1240 pixels wide in total. Widening the browser only adds to the margins. That's why the size is fixed at widths > 1139.

Regarding resolution, I think you're talking about desk-top screens. Today people use all kinds of screens, from 5K desk-top down to 320 pixels phones. You have to desing with screen adaption in mind. This designer has. Decreasing the browser width will scale images and re-arrange the three-column lay-out.

So the designer designed the index page that way. If your index.php is designed for wider browsers, that's fine also.

 

Best regards,

Erik

Share this post


Link to post
Share on other sites
Urbie47

Hi all

Meanwhile i solved the problem by adapting the width of some pictures ( had tinkered too much) 
But as i understand there are more roads to a solution with this problem. Learned a lot on my way to master TNG again.  
Thank you very much all for replying....gave me a warm feeling.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×