adjusting page width?

Get HTML help, style input, and feedback on your pages from other SP members.
User Avatar
brichardsson

 
Posts: 544
Joined: Wed Nov 16, 2011 5:35 am
Thanked: 59 times in 46 posts

adjusting page width?

by brichardsson » Thu Mar 21, 2013 3:49 pm

is there a code i can add that will automatically resize a page to display to the width of the monitor? i just redid the mount williamson page, and because i did it on my super huge laptop, it looked great there, but now when i view it on my work monitor, i have to scroll from side to side because my work monitor is smaller.

example here:

http://www.summitpost.org/mount-williamson/152023
Don't try to argue with idiots. You aren't the dumbass whisperer.

User Avatar
rgg
Forum Moderator
 
Posts: 859
Joined: Sat Oct 02, 2010 7:15 pm
Thanked: 192 times in 154 posts

Re: adjusting page width?

by rgg » Thu Mar 21, 2013 6:07 pm

I did a bit of experimenting, and found that this works well in Google Chrome:

Code: Select all
<div align="center" class="image" style="max-width:30%;">
  <a href="/view_object.php?object_id=843149">
    <img src="/images/medium/843149.jpg" alt="Descending ..." style="width: 100%;">
  </a>
  <br>
  <span class="caption">Descending a steep snow field on Schesaplana</span>
</div>


This code is very similar to the code that's generated when you use the regular way to insert an image in page on SP (using the new editor). There are two key differences:

1) The div around the image doesn't have a fixed size, but is set at 30% instead. That's 30% of whatever else it is contained by. To use the full width of whatever it is contained by, simply use 100%.
2) The image width is not fixed either, but set at 100% instead. That's 100% of whatever it's contained by, which, in this case, is the div!

So, if your page is too wide, then, instead of using fixed size table cells, divisions and images, simply use relative ones where appropriate. You get the idea.

Whether this works in other browsers, and in older versions, I don't know. You'll have to test that yourself.

By the way, the example uses the medium version of the image. In your case, you may want to use the original version instead. However, if your original images are very big, remember that all the MB's are downloaded first, and only resized by the browser of whoever is viewing the page. If you use a lot of big images that way, loading the page will be slowed down; with a slow connection slowed down to the point of being useless. I've looked at SP pages while travelling, and not all internet cafés in the world have a fast connection...

Good luck and please let us know what you find,
Cheers, Rob

The following user would like to thank rgg for this post
brichardsson

User Avatar
brichardsson

 
Posts: 544
Joined: Wed Nov 16, 2011 5:35 am
Thanked: 59 times in 46 posts

Re: adjusting page width?

by brichardsson » Thu Mar 21, 2013 6:43 pm

rgg wrote:I did a bit of experimenting, and found that this works well in Google Chrome:

Code: Select all
<div align="center" class="image" style="max-width:30%;">
  <a href="/view_object.php?object_id=843149">
    <img src="/images/medium/843149.jpg" alt="Descending ..." style="width: 100%;">
  </a>
  <br>
  <span class="caption">Descending a steep snow field on Schesaplana</span>
</div>


This code is very similar to the code that's generated when you use the regular way to insert an image in page on SP (using the new editor). There are two key differences:

1) The div around the image doesn't have a fixed size, but is set at 30% instead. That's 30% of whatever else it is contained by. To use the full width of whatever it is contained by, simply use 100%.
2) The image width is not fixed either, but set at 100% instead. That's 100% of whatever it's contained by, which, in this case, is the div!

So, if your page is too wide, then, instead of using fixed size table cells, divisions and images, simply use relative ones where appropriate. You get the idea.

Whether this works in other browsers, and in older versions, I don't know. You'll have to test that yourself.

By the way, the example uses the medium version of the image. In your case, you may want to use the original version instead. However, if your original images are very big, remember that all the MB's are downloaded first, and only resized by the browser of whoever is viewing the page. If you use a lot of big images that way, loading the page will be slowed down; with a slow connection slowed down to the point of being useless. I've looked at SP pages while travelling, and not all internet cafés in the world have a fast connection...

Good luck and please let us know what you find,
Cheers, Rob


gah. i'm sure i'm gonna gum things up, but i'll give this a try from my home computer tonight. thanks. or not, depending on how badly i mangle my work hahaha :?
Don't try to argue with idiots. You aren't the dumbass whisperer.

User Avatar
rgg
Forum Moderator
 
Posts: 859
Joined: Sat Oct 02, 2010 7:15 pm
Thanked: 192 times in 154 posts

Re: adjusting page width?

by rgg » Thu Mar 21, 2013 9:01 pm

brichardsson wrote:gah. i'm sure i'm gonna gum things up, but i'll give this a try from my home computer tonight. thanks. or not, depending on how badly i mangle my work hahaha :?


Well, before destroying your mountain page, you can experiment away with a code fragment in a separate (custom) object. Then, if and when it looks all right in the major browsers, you can copy it. That's the way I do it when trying something unusual. And with the new editor, trying stuff is much easier and faster. I just switch a lot from HTML to WYSIWYG mode without submitting the custom object in between.

When it looks good in Google Chrome, I submit the changes, then I check the result in IE. I have not done that in this case, that's your job :), but for HTML stuff in my own pages I do. And if it's good in Chrome but not in IE, either I fiddle some more in Google Chrome, or I edit it in IE directly. I usually check it in Firefox after that, although I sometimes forget - that's because it's been a long time since something looked good in Chrome and IE, but not in Firefox. In fact, I can't even remember the last time.


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests