Highlighted

Media Queries Question

New Here ,
Oct 17, 2018

Copy link to clipboard

Copied

Hello,

I am very confuse and I need help, I do not know much of coding. I made my design in photoshop and then slice it and was able to create this html. Everything works links and images but now I want to make it responsive because if you look it up on a mobile device it does not fit the scree. Does anyone have any suggestions. I have try many tutorials and read a lot of blogs and I don't seem to find an answer. I appreciate it.

Thank you

This is what I have tried

@media screen (max-width: 599px) {

img {

width: 100% !important;

}

Screen Shot 2018-10-17 at 12.54.13 PM.png

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Photoshop's table code is notoriously rigid and falls apart at the drop of a hat. You really can't use it for actual websites, especially if you plan to make them responsive. It just breaks far too easily.

If you really want to make a responsive site, you're going to need to take some time to learn some of the more modern coding methods, or use the Bootstrap templates that come with DW and hope they look the way you want. Given that you don't know much about code, those templates are likely to be a bigger can of worms for you than the Photoshop to Dreamweaver workflow you're attempting now.

If you have some time to get some of the basics of html and css under your belt, there are a lot of good places online that can help. W3schools.com has a few tutorials, while not "complete" they are decent enough to get you going...

HTML Tutorial

CSS Tutorial

Responsive Web Design Media Queries

Views

184

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

Media Queries Question

New Here ,
Oct 17, 2018

Copy link to clipboard

Copied

Hello,

I am very confuse and I need help, I do not know much of coding. I made my design in photoshop and then slice it and was able to create this html. Everything works links and images but now I want to make it responsive because if you look it up on a mobile device it does not fit the scree. Does anyone have any suggestions. I have try many tutorials and read a lot of blogs and I don't seem to find an answer. I appreciate it.

Thank you

This is what I have tried

@media screen (max-width: 599px) {

img {

width: 100% !important;

}

Screen Shot 2018-10-17 at 12.54.13 PM.png

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Photoshop's table code is notoriously rigid and falls apart at the drop of a hat. You really can't use it for actual websites, especially if you plan to make them responsive. It just breaks far too easily.

If you really want to make a responsive site, you're going to need to take some time to learn some of the more modern coding methods, or use the Bootstrap templates that come with DW and hope they look the way you want. Given that you don't know much about code, those templates are likely to be a bigger can of worms for you than the Photoshop to Dreamweaver workflow you're attempting now.

If you have some time to get some of the basics of html and css under your belt, there are a lot of good places online that can help. W3schools.com has a few tutorials, while not "complete" they are decent enough to get you going...

HTML Tutorial

CSS Tutorial

Responsive Web Design Media Queries

Views

185

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
Oct 17, 2018 0
LEGEND ,
Oct 17, 2018

Copy link to clipboard

Copied

The simple answer is no it is not possible to make your code responsive.

The more complexed answer is it may be possible if you know what you are doing, but it would not be worth the time and effort. Image slices are not the way to layout a web site anymore, because such pages are normally coded with fixed width/heigh values, meaning they do not scale.

Even using % values can cause problems with image size, as browsers may round up or down an image size if the value falls on a pixel fractional value.

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...
Oct 17, 2018 1
Adobe Community Professional ,
Oct 17, 2018

Copy link to clipboard

Copied

Photoshop's table code is notoriously rigid and falls apart at the drop of a hat. You really can't use it for actual websites, especially if you plan to make them responsive. It just breaks far too easily.

If you really want to make a responsive site, you're going to need to take some time to learn some of the more modern coding methods, or use the Bootstrap templates that come with DW and hope they look the way you want. Given that you don't know much about code, those templates are likely to be a bigger can of worms for you than the Photoshop to Dreamweaver workflow you're attempting now.

If you have some time to get some of the basics of html and css under your belt, there are a lot of good places online that can help. W3schools.com has a few tutorials, while not "complete" they are decent enough to get you going...

HTML Tutorial

CSS Tutorial

Responsive Web Design Media Queries

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...
Oct 17, 2018 1
Adobe Community Professional ,
Oct 17, 2018

Copy link to clipboard

Copied

Start over with one of the Responsive Templates in DW. 

  1. Define your local site folder.  Go to Site > New Site.   Give your site folder a name like C:\myTestSite.
  2. Go to File > New > Starter Templates.  See screenshot.

CC-StarterPage.jpg

After saving your document, DW will create assets folders for you which can be seen in your Files Panel.

CC-StarterPageAssets.jpg

Add your own text and images to your index.html page. 

Post back if you have any trouble.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Oct 17, 2018 1
New Here ,
Oct 17, 2018

Copy link to clipboard

Copied

Thank you for taking the time to reply. I really appreciate it.

Rosy

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...
Oct 17, 2018 0