Build Your Own Business Website header image

Question and Answer

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.


Rick: It’s time for questions…Gertrude has a question. Good evening, Gertrude, hi.

Gertrude: Good evening. Yeah and I’m just wondering if it would not be a good idea just to have the video, the Fix It video which means this is just a sample, instead of having 2 columns, have that going right across and then just have to, in the right column just have to a call to action.

Rick: Well, I just thought you said…

Gertrude: I’m just looking at it and I’m just wondering, unless when I do it for real, I know this is just a testing version, I just need to keep my copy really short.

Rick: Yes that’s the style of landing page that you wanted. It was the style that had essentially as much content as can fit next to a video…

Gertrude: yeah

Rick: There are lots of other ways to configure a landing page but the underlying assumption on a landing page like this is that the video is really selling it, right?

Gertrude: yeah

Rick: So while they’re watching the video, they’re not really reading it anyway…they’re watching the video and if the video sells then they click there to get more information.

Gertrude: yeah

Rick: And then after that, they kind of move on through this.

Gertrude: Sure

Rick: I think what would be great in this situation is if the video just stacked on top of the text just like it does here…

Gertrude: Yeah. Yeah.

Rick: I don’t know how everybody uses their phone. Pretty much everybody uses their tablet like this, right? In portrait…

Gertrude: Yeah

Rick: And pretty much everybody use their phone like this in portrait…

Gertrude: Yeah

Rick: I say that but now I think about it, my wife always uses her tablet like this in landscape view. So I guess with the way this works like this, it seems to me like the best thing to happen would be for the video to stack on top of the text again.

Gertrude: Yes.

Rick: And that’s absolutely possible to do with a little bit of custom CSS. We could easily make the these two pieces stack on top of each other, rather than go side by side like this.

The way we would do that is…what we would want is custom one half… In case let’s just copy that and then we can come back over, this is a little bit more technical now, but come back over to the media queries and in the tablet portrait media query, we could say:

.custom-1.column_2 .half

This isn’t going to affect everything, this is going to affect this instance. And then

width:100%clear:both

So right now those are staying fifty percent so we’re just commanding it, in this case, to behave differently. Save the design options. Reload it. I think they’ll probably just sit there half and half now. Yep there it is…

Gertrude: Okay

Rick: So it’s a little bit more technical. It’s not as simple as pushing some buttons but Agility does have that tool that lets you write a little bit of custom code without actually knowing media queries. You can add a little bit of custom code to the right place or the right version of it to allow you to do that sort of thing. I think that is how I would handle that.

I guess the other thing I’m not in love with is the way the menu happens… you know what we need is the padding-top to go back to 20 pixels.

So we’d come over here and really that’s also in exactly the same spot here. We should be able to control it. Add {padding-top:20px, so now it drops back down size. There we go. That should affect all of our views now. Yeah, it does and so now you’ve got the menu where you can pick one of those things.

It works nicely there. If we were going to fix this, what we’d want to do is… okay, so we’d use the class video landing and an image at align left and then say float:none, clear both. Again, we are looking at video landing okay, that’s the class name. So if we want to fix that, then we come back over to media queries and in this case we’re looking at phone portrait…

Gertrude: Okay

Rick: And so it’s .video-landing img.alignleft and it’s going to be

{float:none;clear:both;

Now, if we want it to center that in the space we could also since we know it’s width, we could say:

width:205px;}

and then we could say:

margin:0 auto;}

which should center that image into space… so there we go…

Gertrude: Yeah

Rick: Okay. So now you’ve got a little bit of custom media query work done that centers those images for you. It doesn’t affect this view of it but it fixes these views so that you don’t have a little bit of text there.

Gertrude: Yeah

Rick: Okay, any other questions?

Gertrude: No, I’m very happy, I’m going to look at it in more detail and then I’m putting the real content in.

0 Comments… add one
0 comments… add one

Leave a Comment