How To Set Your Page Width

WELCOME!

Welcome back to the User Experience podcast.

This week in our Summer Page Design series we're going to set the Page Width using a short snippet of CSS code, to make your pages much easier to read.

This is especially helpful in your courses when you have chosen to display the Modules in a Grid below the lessons, rather than off to the right side.

If you find you would like to have a little more help... please go directly to Juci's "Summer of CSS Magic" program.

LEARN FROM A PRO

For page design help in your own MV site, please visit our friend Juci's program "Summer of CSS Magic" -- where you can get individual help making your MV shine!

CODE

Here's what you need to control your page width. Copy the following code and paste it into the CSS field under your Advanced Page settings.  Play with the number "1000px" if you would like to fine-tune the width.

Please remember to make a backup copy of any code on your page BEFORE you attempt to paste, edit, or add anything new! 

AUDIO

If you prefer to listen, enjoy this audio version with the music player below.

TRANSCRIPT

Hey, everybody, I'm Steve Knots. Welcome back to the User Experience podcast, and we are in the middle of our summer series of page design tips. This week, I'm going to show you how to change the width of your page, so that it's not the full width of the screen.

As you can see, right now, there's a big beautiful video. But as this text goes down, that's a lot of texts. And when you're trying to read it, your eyes have to go a pretty long distance side to side. This is, by the way from Wikipedia credit on the text. And you can see even Wikipedia, maybe might not have all their texts going full width, there's a margin on the side, it is a bit difficult to scan a page when it's really wide. So how do we solve that problem? Well, we're going to figure that out.

And just in case you are catching up in the middle. This is part of our summer CSS Design series, we have a blog post on the MemberVault blog with a CSS library of goodies, which means if you want to catch up on the previous posts, you can go to the episode list, learn about the introduction of the program, adding custom buttons, drop down menus, background boxes, removing your page title and footer, which makes it look really clean. And then this week, we're going to set the page width. Now some people have not done any code at all, it's not that difficult. And I'm going to show you how to do it today without breaking your site. But if you would really like some assistance, you can click this link from our friend Juci who's doing a summer of CSS magic guided program, where she takes you through the steps that I'm showing you, I'll show an example.

You'll see we'll show you how to actually do it in your own account with your own branding with your own custom colors. And anything else you want to do. Change the buttons from round to square and back again or give them a border. Whatever you need to do to make your MemberVault site look right, Juci will help you do that. With our program that is absolutely worth the price you pay because think about it, paying someone else to code your site for you is definitely going to be more expensive. Not even considering all the back and forth communication and emails and all this stuff about it doesn't look right, just learn to do it yourself. It's not that hard, Juci is a master of programming, and she can take you through the process.

What I'm going to do is just show you how I do it. So here we have the page. And basically I want to make this a bit more narrow. And I have a little piece of custom code. So let's get to the page. We're in the page editor. So you go to your MemberVault, click on pages, you can add a new page or edit one that you have set up. This one is called Set your page width. And I've got the slug page with status and visible for now enable comments Yes, and page content, I just have a big YouTube video of blooming flowers, and the text that I copied from Wikipedia.

Now this might... I'm using this as a model of a course where you might have a tutorial video on top, a lesson description and then some activities below. And maybe you find it looks better with the page set at a narrower width, especially if you have your module set up so that the modules are displayed underneath in a grid and the page is going full width. Well, full width might be a little bit too full.

So what are we going to do to solve this problem? Let's go down to the advanced section to add custom CSS. Now what I usually do here is before I edit anything, I want to repeat this every time, I'm going to show you my main site, General Settings CSS, before I edit anything, I go like this, select all, copy, go to a text document, new document, paste, and then save that. So I have a backup copy of all my code. Now we're going to be on a page. This is a blank page with nothing else in here, it doesn't matter, I still want you to be aware, as long as you backup the code you have and save it to a text file someplace else, then you're safe to explore, experiment, play with some CSS settings, and not worry that you're going to break your site, lose something important, undo something else that someone did that you paid for and you don't want to undo it.

So that's how to backup your code. So it's safe to explore. And I'm not gonna say fool around but test new things. And now we have this little piece of code and the content Max with 800 pixels, let's set it to 1000 margin zero auto now I can't fully explain what every little bit of that CSS means. What I can tell you is we paste it in here in our custom page CSS, click the Save button or just click outside the frame to save. And we go to our page web page and refresh. Look at that. It's a little bit less wide. Turn off the flower music Let the flowers play. Let's see what happens just for purposes of illustration. What if I want this page to be only 600 pixels wide, illustrating that all you do is type in the number you want. Save and refresh. I would look at that. Now the video is nice and narrow. The page with title is all the way over there.

And the text and this is what I like is when you're scanning text, you can easily see the paragraphs read through them and your eyes aren't going all the way to the right and left of the page. That is how easy it can be to set your page width so that the content displays within a frame or margins. Now 600 is a little bit too small. And notice what I'm doing here I have one page where I'm editing the code and Another tab where I'm previewing, that's a quick way to make edits and see what you're doing. So that you know you're getting the results you want, and you're not making a mistake, I really recommend that every time you change something like I'm doing right now, you make one change at a time, save and refresh. That way, if you happen to make a change that's wrong or doesn't work, you will see it immediately. And you can quickly undo what you just did.

What I don't recommend that you do is go in and try to change your page width and your title and your footer and your colors and everything all in one big edit. And then you finally go to Preview and find out the whole thing's messed up and you don't know which piece is broken. So when you're doing these page edits, really, please seriously, do them one at a time, save, refresh. And if you find out it's not working, you can either undo what you did, or you can take your backup text file, and just copy everything, paste it back in, delete what you did and start over. That's the value of your backup is it allows you to reset, do overs start over and fix whatever was going wrong. So I mean, now look at this, we're done, we have a nice video up top that's displaying our time lapse flower blossoms.

And this is like an hour long we used to when I was doing events, we would use these videos and project them on the screen and just have time lapse flowers blossoming and part of the room. Really cool to put up visuals like that. That's not related to MemberVault, just kind of a side story.

And we've got the page width. Now 1000 pixels is okay, that's makes it usable. And I have to actually find out more about why the comments are off to the side. And you know what I'm going to do, we're going to do an experiment now. So I'm going to delete this out of the page itself. Refresh. Now we have full width 1000 pixels. And that bothers me That's too close to the to the margin. Let's go to the general settings, and drop our page width code there. This is in the sidebar, General, General Settings account social advanced, here's our custom CSS and I am before this video, I already actually saved all that somewhere else. So don't worry that that's not saved.

Now I just pasted my content with 1000 pixels into the general settings, meaning everything on my MemberVault site will take that 1000 pics pixels width. Let's refresh this page. See what happens. Okay, well, it adapted the 1000 pixels for the page width. However, the comments and the page title are still full width. Now this is something where I can learn a little bit more, and find out how to get the page title and everything else to line up with the same with I can't tell you how to do that right now.

If you want to know the person you want to talk to is Juci at Code & Glitter, who can definitely help you and you can sign up for her program, summer of CSS magic to get questions like that and many more to customize your page. Now this is an exact example. I'm serious. I didn't plan on this happening. I went live and I showed you how to do the page with it's a simple piece of code you can paste into your advanced settings. And naturally, we do run into follow up questions. How do you control the title, the banner, the navigation area, the footer? How do you set the width of those, I mean, that's not going to ruin my Membervault experience. But I am a little bit curious if I could get the comments to line up on the same margin as the text... So that's something for me to follow up in my learning journey on doing code. I hope this is useful for you.

And again, all you need to do is take this little piece of code, let's copy it, go to your page Advanced Settings, drop it in custom CSS and save. Now for me personally, I'm going to leave this on my main global settings because I do want my entire MemberVault site to take this 1000 pixels width and not auto adjust to full screen. So on this individual page, I guess it doesn't hurt to leave it there is just a little bit redundant, we can refresh.

And that is it! Short and sweet. I know everybody's busy. So this is one quick thing you can do to control the page width so that it's easy for people to see your content, scan it from side to side and arrive at the button where they click and join your program. I don't have that on this page. But you know what I'm talking about. Thank you very much for watching.

I'm Steve Knots, drop a comment underneath this post wherever you see it. And remember, you can see a list of all the episodes at http://courses.vipmembervault.com/css-library that contains a link to all our past episodes of this CSS page design series, as well as a link to Juci's code and glitter summer of CSS magic which I really recommend and she is so friendly and so helpful. I guarantee you that you will enjoy a conversation with her if not taking her whole entire program itself.

That's it for me. Have a fantastic day and I'll see you in the Facebook collab.