how to make a website responsive to mobile?

[mido...@gmail.com]

Google web designer is supposed to make websites that are responsive to any gadgets, right? well, I designed a website and it looks good on the computer, but it's ugly on phone, it doesn't even zoom in/out.
check it: http://gate-azhar.co.nf/
was I supposed to do something in the beginning, that led to this mess?

[Svein-Tore Narvestad]

Hi

Your web site will not be responsive by itself, you have to make it responsive, and your site is not. You have to:

1. Set components width to percent and not px.
2. Use media rules.

Media rules can be a difficult task, but NOT in GWD. I will also recommend this youtube videos:

https://www.youtube.com/watch?v=pdEoLrGwMTY

https://www.youtube.com/watch?v=wk5QqUyvCso

Svein-Tore

[Mahmoud Farghal]

thanks for answering, mr.Svein-Tore

yet I have another question: can you explain what do you mean by media rules?

and should I do that in design or code view?

[Svein-Tore Narvestad]

Hi Mahmoud!

@media rules are CSS coding. You can code it in code view, or use the media rules (responsive) in the design view. Let me give you an example:

@media (max-width: 1228px) {
.gwd-img-up8c {
visibility: hidden;
}
.gwd-img-8guw {
visibility: hidden;
}
.gwd-carouselgallery-1teb {
transform-origin: 166px 109px 0px;
width: 331.98px;
left: 6.58%;
top: -5px;
}
}

Here I have an image with the class gwd-img-up8c. A you can see:

@media (max-width: 1228px) {
.gwd-img-up8c {
visibility: hidden;
}

This means when the width is from 0 to 1228px, this picture is hidden. The reason is that when the screen size is less than 1228px there is no space for this image. So I use the
@media rule to fix this.

I recommend you to take a look here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

On the other hand, it is much easier to fix this in design view. Unfortunatley I can't find a way to upload something for you here.....

Svein-Tore