Highlighted

phone display from website different to preview in dreamweaver

New Here ,
Nov 21, 2019

Copy link to clipboard

Copied

Hi, 

Sorry if this has been asked before but I've looked and can't find a similar problem. I have almost completed my website which has responsive changes for each screen size. It looks exactly how I want it to when I use the preview function in Dreamweaver on my phone but when I upload it to my host, it displays the media queries set up for my tablet screen layout (around 900px) and the header image doesn't fill its allocated box. I set the website up as phone view and used media queries to adjust for bigger screens. Any help would be greatly appreciated. 

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Add the following line in the code, after the UTF tag on line 4

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
TOPICS
Code, Performance

Views

187

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

phone display from website different to preview in dreamweaver

New Here ,
Nov 21, 2019

Copy link to clipboard

Copied

Hi, 

Sorry if this has been asked before but I've looked and can't find a similar problem. I have almost completed my website which has responsive changes for each screen size. It looks exactly how I want it to when I use the preview function in Dreamweaver on my phone but when I upload it to my host, it displays the media queries set up for my tablet screen layout (around 900px) and the header image doesn't fill its allocated box. I set the website up as phone view and used media queries to adjust for bigger screens. Any help would be greatly appreciated. 

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Add the following line in the code, after the UTF tag on line 4

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
TOPICS
Code, Performance

Views

188

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 21, 2019 0
Adobe Community Professional ,
Nov 21, 2019

Copy link to clipboard

Copied

Please give us a link to the site


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 0
New Here ,
Nov 21, 2019

Copy link to clipboard

Copied

Thanks for replying Ben. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 0
Adobe Community Professional ,
Nov 21, 2019

Copy link to clipboard

Copied

Add the following line in the code, after the UTF tag on line 4

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 1
New Here ,
Nov 21, 2019

Copy link to clipboard

Copied

You are a champion Ben, Thankyou so much for your help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 0