If we choose Stretch to Browser Width, that's it, no pinning necessary. And the map, all we're gonna do with that is we're just gonna make it stretch all the way across. So if I come up under Resize, yep, it's gonna keep getting narrower the narrower we go, 'cause it's responsive width. So we're gonna turn off any responsive movement. Now we gotta make sure here that the box doesn't keep stretching and squishing, okay? 'Cause at this point, I want to keep it about that size. So with it selected, I'll go to the text panel and center align it, and it's not bad. So I'll select this one, the text, I'll say Pin to Center and I might center align that text actually. So in other words, we're gonna do what? We're gonna pin them to the center. "Let's put the text up here." I wanna make sure that we keep them in the center. You'd say, "You know what, let's put the map down here. So at that point you would create a new breakpoint. You're gonna get to a point and you're gonna say, "You know what? "It might be better if we have the text up here "and the map down here maybe," or the map is just getting small. That's just because that's the nature of the beast, the way it sizes. They are responsive they're gonna change, but as I drag when I do that, let's see what it does. So if I click back to get back to the large size and then you click on this object, and I'm gonna make sure it's on the column there. If we wanted them to stick on the edge of the column we would pin them before we start all this. See how it crept in? See these two right here how they crept in towards the edge? That's because of that percent. So at some point we're gonna look at it and say, "You know what? "We probably need to make a design change." And you'll probably notice that it actually. So you're gonna see that the map is probably gonna get a little narrow. So if you drag this scrubber to the left you're gonna see what it does. We gotta make sure that we got this content out here. Alright, now if I want to we can just try it out.
Line it up using smart guides, it's just gonna do it for me, so that's kinda cool. Alright, that way I can put the text there. That's just all it is, is a way for you to line stuff up basically, make it easy on you. So that could be kinda neat, you could do something like that. And you can also take, if you want, we've got that column set up, you could take that gutter and make that bigger. But I could come in here and I could say, "You know what, let's do this." I'm shift clicking to crank these up, but you can actually pull in the margins from the edge, can you see that? And that way it might make it a little easier for you not to have content all the way to the edge. We just talked about them in the beginning. If you look in there, you're gonna see there are all of your margins. You can come over to Page and come to Page Properties. And you guys, if you decide later on, you're like, "You know what? "I want columns to have a little bit more padding, "a little more push from the edge," 'cause maybe this stuff is too far to the edge or too close to the edge. I wanna stretch it to kinda fit here in the columns.
It's gonna scale, and just to try it out or look at it, here's what I wanna do first. Now once we get that out there, this Widget is also responsive. You could do just about anything you want here. We could change the map to be like a hybrid satellite type thing. They can go in and adjust and move and do all kinds of things, but these are the starting points. Whatever you see at this point, that's what it's gonna show the user to start with. It's gonna put in that map, and you're done. All it's gonna do is say, "Where's the map? "What address do you want to put for the map?" I could. So I'll drag it out, drop it on the page.
Responsive resize muse how to#
In the advanced class actually it showed you how to do that, but if I scroll up a little bit you're gonna see we have Google Maps.
Responsive resize muse full#
Now it's not gonna let you do things like put a full screen background video, that type of thing. So if you have your videos hosted on a social site, YouTube or Vimeo, you can just drag the Widget out and point it to that actual URL, and that's just going to put it out there. If you look in there, you'll see that we have at the bottom, we actually have YouTube and Vimeo. Make sure you can see the social category. So, I'm going to fit the page in the window under View, fit page in window, come to the Widgets library and scroll down. It's kinda sad, but we're going to put a map on the page. We really don't have a lot going on here.