Subscribe or Login to watch video

Login or Subscribe to watch video

38 - How to create the responsive mobile view using media queries in Dreamweaver


Questions & Comments

Andy - 9 months ago

Hi guys,

I have an image issue with my mobile view. At the moment, you can easily adjust columns so the design adjusts from desktop to tablet, to mobile view. This is really good for text...but i's images I've having the issue with.

At the moment, while my main homepage image is optimised for desktop, laptop and tablet views, it's too wide for a mobile 360p view (the image is 620px wide and goes out of screen when testing in a mobile view). I've tried designing a small version of this same image (at 320px) but if I try deleting the existing image (when at mobile resolution) and adding the new mobile optimised image in its place, Dreamweaver simply replaces the image for every resolution.

Is there any way to add a different main/hero image in mobile view, without it affecting every resolution please?

Thanks so much.

Andy

Andy - 9 months ago

Any help with this would be much appreciated. Thanks.

Administrator Tayla Coman - 9 months ago

Hi Andy, usually the easiest way to make an image nice and responsive is to make the css properties as follows: height: auto, width: 100%; this should fix most responsive issues.

Sorry for the delayed response

Andy - 7 months ago

Hi Tayla,

Thanks for the reply and don't worry, I've been away for a bit myself. I've also replied to your email on this too (with more details and images on this issue).

Thank so much

Andy

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi, my name is Dan. In this tutorial we're going to look at creating the mobile version of our website. To do that we need to understand a couple of things. One is, what Responsive is, and another one is what a Media Query is. Up until now we've been building the desktop version, but if you look at my Photoshop mock up, I've got this one on the right here, I've designed my Desktop, but I've also got what it looks like when it falls down to mobile. You can see it's a little bit different, some images turned off. These stack differently, these stack differently. So I need to do that in Dreamweaver.

Let's have a look at what our current site does. Let's see a working version of it. Now, this site here, startbootstrap sells things for bootstrap. We're creating our own at the moment, but if you wanted to cheat, and buy one, you can start here. Now one of that things here, just nice and clear to see, what it does when it breaks down in terms of Responsive. So what happens is, it clicks, and we're dragging it down and as it get smaller, you can see a desktop view. It's set to these featured boxes to be 4 across. But when it gets smaller, down to say a tablet, you can see, it breaks down to 2 and 2. Now, when we get down even further, it breaks down into mobile view. Which is, all stacked on top of each other. And two things are happening.

The term Responsive is the broad term for-- say that the website responds depending on the browser size. The thing that activates the browser, or activates these changes from tablet to mobile is something called a Media Query, and it's a bit of code that says-- the screen width happens to be 700 pixels here, so it's activating the tablet version, but when it gets below 700, it activates the mobile version. It's just a bit of code that just looks at the screen size, and the browser width, and activates different bits of code depending on how wide the browser is. So if you've done it on a mobile, it's going to activate the mobile size.

Now there are two distinct uses for these Media Queries. One is to activate the columns, which we just looked at before. Remember, we did earlier, when playing around with our columns. This thing here is 12 columns across. And this one here is occupying 4. 1, 2, 3, 4… 1, 2, 3, 4… 1, 2, 3, 4. Adding up to 12. So these guys are spaced liked this. But when it gets down to tablet, that's actually different now. These little boxes were being told to span 4, now they're getting told to span 6. So 6 and 6 equals 12. Then it get down here, these boxes now are being told to span 12. So that's one part where Bootstrap and Media Queries are playing around with the structure or playing around with the column width, depending on the size.

Another distinct part is when the css gets activated and changes its style. So instead of changing the structure it changes the style of say some of these css Classes. You see, here there's an H1, and it's nice and big when it's a desktop, but when it gets down to a mobile, it's a lot smaller. It's a way of telling the css, use the exact same Media Queries, but instead of changing things like the column width, we are changing the size of the font.

So we're going to separate those in two separate videos just to makes sure that they're clearly different. And we will work on them separately, not together

ALL ACCESS: $12 per Month + Cancel anytime