Page Size

Permalink
How do you increase the size of a page so it takes up more of the screen. Seems like all the pages are narrow and I would like my pages wider.

Tags:

page, creating pages, page automation, page model
View Replies:
jbx replied on at Permalink Reply
jbx
Using css...

Which theme are you using? And what resolution screen are you using? Bear in mind that not everyone has modern hi-res screen sizes, so don't make it too wide. I tend to work with a maximum width of 980px, so that people with a screen resolution of 1024x768 wont have to scroll left or right. The other option is to use a layout that will stretch to fit the screen, but getting that to work consistently across the ever growing range of screen sizes can be a real challenge.

Jon
danoutwest replied on at Permalink Reply
Jon,

How do you go about changing the layout? Is there a method of setting pages to automatically fit to resolution size?

Cheers

Dan
jordanlev replied on at Permalink Reply
jordanlev
It requires modifying the html and css of your theme. If you're not familiar with html or css at all, it's going to be a bit challenging -- you should google around for how to do this in just plain old html and css (not specific to Concrete5 or any other CMS). Then when you understand how that works, it will be easier to figure out how to make it happen in a c5 theme.

Good luck!
ses604 replied on at Permalink Reply
Hello All,

Is there any update to this answer before attempting this solution? I am using the Dreamy Theme and I have the same problem. On my 14 inch screen it only renders about 6 inches across and I want it to fill the screen at any screen size or resolution.

http://www.geminiuniversal.com

Thanks!!

Susan
mkly replied on at Permalink Reply
mkly
Hey Susan,
It can be a little more complicated than a simple press of a button for this one. If you take a look at
/tools/css/themes/dreamy/main.css

Near the top you can see
#wrapper {
   margin:0 auto;
   width:700px;
   background:#ffffff;
   font-size:1.20em;
   }

If you change that to
#wrapper {
   margin:0 auto;
   width:960px;
   background:#ffffff;
   font-size:1.20em;
   }

You will notice that it gets bigger, but the internal content does not expand with it.
You can then change
#sidebar {
   float:right;
   width:180px;
   background:#efefef;
   margin-right:10px;
   }

to
#sidebar {
   float:right;
   width:300px;
   background:#efefef;
   margin-right:10px;
   }

and
#content {
   float:left;
   width:500px;
   min-height:400px;
   }

to
#content {
   float:left;
   width:640px;
   min-height:400px;
   }

But then you'll notice the header and footer do not expand out. This is because these they are images and can't "stretch out".(Well they kind of could but it wouldn't look so hot). So you would probably need to switch them out. Also the alignment inside of things would need some tweaking. It is definitely doable, though.

Feel free to ask if you have questions. I'm super busy this week but it looks like a worthy cause so I'll try to answer when I get a chance.
EmeraldStar replied on at Permalink Reply
EmeraldStar
Great answer for the woman changing her width.

What about height? My home page seems to make the page length way longer than what I need. How do I change that?

Thank you.
EmeraldStar replied on at Permalink Reply
EmeraldStar
I figured it out, never mind. Thanks!

p.s. So incredibly simple, it's embarrassing, I had extra space from copying and pasting content. Yeesh.
ses604 replied on at Permalink Reply
Thank you so much. I had my "Taurus Tips" page link Retweeted to 4,229 Alley Cat Allies followers yesterday in celebration of National Feral Cat Day, so I want my site to look as professional as possible on all screen size / types / resolutions.

I'll work on this and get back to you.

I really appreciate your help and interest!!

Susan