Search code examples
javascripthtmlcssftpdreamweaver

Responsive website margin error

Hello everyone!

Im building a website (in Adobe Dreamweaver) for a client and stumbled upon a few problems.
My client wants a responsive website for Desktop and Mobile devices.

I started scripting the desktop version and later scripted the mobile version in the same document using @media queries. This is what I used: 

@media only screen and (max-width: 500px){
}

Problem 1

When I use the preview option in Dreamweaver everything in Google Chrome and Firefox shows normal until I resize the browser window to mobile size. I get a huge margin on the right thats as wide as the mobile website itself. Here's a gif of it:
https://media.giphy.com/media/3ov9k7XXWOog4KJN9m/giphy.gif

Problem 2

Also when I preview the mobile version in dreamweaver it looks how it should look.
However, when I upload the website trough an FTP-server it looks very different.
The online version isn't displaying as it should.

This is how the offline version (in Dreamweaver) displays it: https://ibb.co/fTtwvm
This is how it looks when I uploaded it trough the FTP-server: https://ibb.co/iWbMT6 .

I really hope you guys can help me with this problem.
Here's the code: https://codepen.io/jessekoops10/pen/GORMrv
Thank you very much!

Solution

  • For problem 1:

    You have indeed some elements pushing out the page, and that is happening because of some fixed widths you have there near the header and footer of your page.

    .container and .copyright classes have the same width always (1000px), you have to resize them too.

    I usually notice this using Chrome Developer tools inspect utility, but not by right clicking directly on an element, i instead hit Ctrl + Shift + C and then move the cursor around the blank spaces to find which element is causing the problem.

    enter image description here

    For problem 2:

    You may try setting the zoom level in the viewport meta tag

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    Look here: https://www.w3schools.com/css/css_rwd_viewport.asp