Dreamweaver CC How to edit styles across media queries and sizes

I am creating a fulid grid/responsive website, using the standard Media queries offered by Dreamweaver CC when I start a new document.
I have creative several DIVs to sturcture my page.
I don't understand how to apply changes between the various media queries.
Frist, I see you can drag the width of the boxes to adust how wide you want the portions to be. That I get. But what I don't understand is to apply different formatting/styles in the different screen sizes. There used to be a box that would pop up when you wanted to create a new class. Now I can't figure out which version of the screen to work in and how to make changes ONLY to one screen size.
Here's an example of what I want to do:
The main portion of my website has 4 categories, that I would like the user to be able to choose from to click on.
On the mobile view, I want the image align left, text to the right of that, aligned left, and for the background of each category to be the same color so that it looks like one big button on mobile.
On tablet and desktop view, I want the image centered within the DIV, then the text centered under each image. I want the graphic image (which is in a circle) to stand out on a white background.
In the tablet view, I have it organized by 2 rows and 2 columns.
In the tablet view, I have it organized by 1 row and 4 columns.
I hope this make sense.
How do I signifyand create these changes? I have tried entering it in the code. That just seems to center it every image in every DIV (remember I want it aligned left in mobile) Or I tired entering it on the code in another way and that centered the image across the whole page, not just the DIV. HOw do I work around these problems? Do I need to make them all a class instead of a DIV? I am really confused....
Please be nice as I am obviously a bit of a beginner and struggling with this basic concept. I appreciate any guidance or help that anyone has to offer.

#1 Build mobile first. Everything else is based on that primary layout. Don't worry so much about content yet. Just get your mobile layout in order. Then build tablet and finally desktop.
#2 Do not tamper with code in your FluidGrid.css or Boilerplate.css files. These files are temperamental. Use a separate external style sheet for your content styles. That way if you do something wrong, it won't break the whole layout.
#3 Keep your layout structure simple and uncomplicated. No tables, no positioned elements.
#4 Everything needs to be inside the <gridContainer> div. If it's not, it won't be responsive.
Nancy O.

Similar Messages

How to edit xml file particular value. and how to send xml file over ip address 192.168.2.10 using ftp

how to edit xml file particular value. and how to send xml file over ip address 192.168.2.10 device using ftp through Ethernet

Hello
For using FTP function in LabVIEW, I recommend you to check this document: FTP Basics
Also, take a look at FTP Browser.vi, which is available at the Example Finder.
To edit a XML file, try to use VIs in XML palette. Maybe Write to XML.vi helps you.
Post your current VI if possible.
Regards
Mondoni

How to edit font of printer depend on size of abap list report.

Hi all,
How to edit Format type"X_65_255" of HP Laser printer when print out the same preview in abap list?
Example:
I want print as below:
     Title of abap list:                 AAAAAAAAAAAA --> size 15
    body of abap list:
                                           colum1   column2   columm3 ---> size 10
                                            s1          cccc          bbbb    -
> size 10
I need it whenever you find time out of your busy schedule.. Please help me .. Thank you so much.
Edited by: kishan P on Oct 13, 2010 12:02 PM

Hi,
I have to set font type on matrix printer.
Can You please explain how did you find
\e(s0p24h15v0s0b16602T
for
select arial 24 cpi 15 point normal
As I can see, all the escapes defined in "Printer initialization" are in
\e\0xqw\0xer0x\tz
form, where qw, er, tz are hexa decimal interpretation of escapes from printer manual.
I am confused where did You find annotation such as
\e(s0p24h15v0s3b16602T
Thank you, cheers.
p.s. - if You want me to open another subject with this question so I can express my gratitude, please let me know.
p.s. - in SPAD > Device Type, Print Control tab, we have
SF005     |     1B6B001B4D121B57001B461B35
and I know the
"1B"
stands for
\e
but then at "6b........" I am lost...

How to edit/share documents between iMac and iPad

I would like to edit documents on my iPad and have those changes appear on my iMac and vice versa.
I was hoping to use Office2 HD and Dropbox, but it seems that documents can't be saved back to Dropbox on the iPad. Everytime I try and save in Office2 HD I get a "this folder is read-ony" error.
Is this a problem with Dropbox or is it a problem with Office2 HD?
What work flow would people recommend? I was hoping to not have to buy the whole iWorks for both my iMac and iPad. I don't do that much of this kind of stuff and was hoping for a cheaper solution.

Thanks Angelus angel.
I think I worked out my problem. Because of the way the iPad deals with security you can't open a document directly from the Dropbox app into another app and then save it back.
Instead I had to setup my Dropbox details in Office2 itself. Now it works great!

I am using media queries and div will not centre on desktop version

Hi,
I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
I have pasted my code below, am I missing something?
Any help would be great.
Thanks, Alex.
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
color: #FFF;
background-color: #000;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
text-align: left;
#LayoutDiv1 {
width: 1000px;
padding: 20px;
margin-right: auto;
margin-left: auto;

Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true. Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?

Media Queries and Orientation

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

CSS, Media Queries and Iphone4

I downloaded the Adobe Certified iPhone 4 Emulator and what it is showing is not at all what is happening on the phone. I think part of it has to do with the pixel ratio, and using media queries?
Has anyone else had any problems? Or know how I can fix this?
Thanks.
-Jeana

I have the same problem with css3 (border-radius property). Rounded corners show up correct on my iPhone 4; the Adobe Certified iPhone 4 Emulator shows rectangles...
Has anyone a solution?
Regards,
Men

How to find accurate number of Rows, and size of all the tables of a Schema

HI,
How to find the accurate number of Rows, and size of all the tables of a Schema ????
Thanks.

SELECT t.table_name AS "Table Name",
t.num_rows AS "Rows",
t.avg_row_len AS "Avg Row Len",
Trunc((t.blocks * p.value)/1024) AS "Size KB",
t.last_analyzed AS "Last Analyzed"
FROM dba_tables t,
v$parameter p
WHERE t.owner = Decode(Upper('&1'), 'ALL', t.owner, Upper('&1'))
AND p.name = 'db_block_size'
ORDER by 4 desc nulls last;
## Gather schema stats
begin
dbms_stats.gather_schema_stats(ownname=>'SYSLOG');
end;
## Gather a particular table stats of a schema
begin
DBMS_STATS.gather_table_stats(ownname=>'syslog',tabname=>'logs');
end;
http://www.oradev.com/create_statistics.jsp
Hope this will work.
Regards
Asif Kabir
-- Mark the answer as correct/helpful

How to edit a Animated Gif file and convert to SWF

I am using the creative cloud with fireworks. I chose the free trial with buying in mind if I saw it work properly. I simply want to upload an animated GIF file and then download it as a SWF file. I saw someone on youtube do this and it's not that if I get on the correct page I would not know how to do that but I just cannot find how to get the GIF into the software to edit. It has just simply put them in the creative cloud folder which can open them on IE> How do i make it available to edit and convert to SWF please? Thanks in advance.

You will likely get better program help in a program forum
The Cloud forum is not about using individual programs
The Cloud forum is about the Cloud as a delivery & install process
If you will start at the Forums Index https://forums.adobe.com/welcome
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll

How to edit a file from Organizer and return it to Organizer?

In PSE5, in Organizer, I want to fix a photo. I right-click it and "go to quick fix" or"go to full edit". Editor opens up, I edit the photo, and want to return to Organizer. How to do that? If I try to save, I have to go through several dialogs, including warning that I'm about to replace an existing file, and default option to save a version; which all looks like I'm creating another instance of the file. Or, if I want to fix multiple files, I select them all in Organizer and go to quick fix; once I have finished, I don't see how I can commit all changes back to Organizer (which is showing "edit in progress" on them meanwhile) - I have to save each individual file, going every time through those several dialogs. Am I missing something obvious?

Not missing anything, that's how it works. If you want to replace the
file, go ahead, but most people keep a separate version, so you have
your original, and then the one they changed. That way, if you don't
like what you did, you can always go back to the original. You should
get something like: IMG_001.jpg (let's say that's your original file),
and then IMG_001-edited-1.jpg as the next one in the version set. This
is how Elements works. Most editing does change pixels, so you actually
have a new file. (I know that some editors/organizers do support
non-destructive editing, but you are very limited in what things you can
do.)
-Trish

How to edit videos frame-by-frame and export in H264?

I wish to edit some videos and then export them in H264 so I can use them on a website.
I have tried to edit with iMovie 08 but can only edit second-by-second. I want to edit frame-by-frame ie to the millisecond. And it appears that iMovie 08 does not export in H264.
I have looked at iMovie 11 which has a Precision Editor which would work to edit as I want but for that I would have to upgrade from Leopard to Snow Leopard which I don't want. It would export H264.
I also have QuickTime Player 7 Pro but that too seems to edit only by the second not by the frame; it does however seem to produce H264
How can I edit these videos precisely and produce H264? Is there another application which would work better (and doesn't cost a fortune).
Thanks for any ideas

I want to edit frame-by-frame ie to the millisecond.
Am a bit confused by what you say. iMovie and QT 7 Pro are both "frame" level editors. However, some forms of editing are, by their very nature, applied over a range of frames which may be a part of your problem. In addition, since "normal" movies have frames which are spaced apart in the 16 to 42 ms range, your requirement to be able to edit to the nearest millisecond would seem unreasonable and would probably be unsupported for playback purposes without skipping 90+ percent of the frames on most platforms.
And it appears that iMovie 08 does not export in H264.
All of the "Share" and/or "Export" options (except Final Cut XML...) either default to H.264 or allow export to H.264 (or X264 if installed) video compression.
How can I edit these videos precisely and produce H264? Is there another application which would work better (and doesn't cost a fortune).
Difficult to say since you have not given any indication as to what you mean by "editing" here. You could, for instance, edit normal movie clips in a normal manner and then use an application like the JES Deinterlacer to change the playback time reference to achieve an effective 1 millisecond/frame playback rate you seem to want to target even though your platform cannot play every frame during playback.

How to upload an real media file and give it as link to users access

How can we upload an real media file into htmldb? How can we give it as link in the application to play from the client PC real player. Any help is appreciated

Hi,
The following is the program[Click Here| http://saptechnical .com/Tips/ABAP/email/EmailProgram.txt] which will send any format file. Actual Creator of the program is Amit Bisht.
Thanks & Regards,
Rock.

How to paste style on whole table and not one cell at a time?

Hi,
I am copying a style and then trying to paste it on a whole table, but it will only allow me to paste the style on each cell separately, and it takes a long time.
Is there a way to paste a style on the whole table?
Thanks,
Shani

Hi Peter,
I am creating shipping labels.
My table is divided like the paper labels in my printer.
I am copying each address directly from my browser (each address on one cell). After I copy all the addresses, I adjust one them to: avenir font 9.5 pt, indents 0.5 first etc, and then I paste this style on each cell separately.
Is there a way to paste the style all together in one time? (I am making shipping labels every day so it is not a one time thing).
Thanks!
Shani

How to Edit RAWs first in LR and cto ontinue in RAW in PS-CS2

After having edited RAW photographs in LR I would like to be able to continue my editing in RAW in PS-CS2. However when I go from LR to PS-CS2 with "edit in Photoshop.exe" it opens a PSD file and therefore I can not continue in PS-CS2 RAW.
What can I do?
Thanks for reply!

LR lacks the hooks to do what you want, pass RAW to ACR and then open in PSCS. Maybe some day. For now Export with XMP sidecar and open in PSCS from Bridge. As Geoff and Lee Jay indicate, ACR will pick-up what you havw done in LR and then you can continue from there. The only way for now.
Don
Don Ricklin, MacBook 1.83Ghz Duo 2 Core running 10.4.9 & Win XP, Pentax *ist D
http://donricklin.blogspot.com/

How to edit podcast hosted on mypodcast and now added to itunes?

i recently added my podcast from mypodcast.com to itunes. i changed the info later on mypodcast.com including the pic. how do i update this info on itunes?

Just make the changes in the feed an reupload it. It will normally take 1-2 days - sometimes longer - for new episodes and other information changes to appear.
If you want to change the picture you should give the new picture a new filename and change the feed accordingly: iTunes caches the image and if you change the picture without changing the filename it's unlikely iTunes will realise it's changed. If you're using an online service to make your podcast, as seems to be the case, you may not be able to change the filename so all you can do it wait and hope the change is picked up eventually.

Dreamweaver CC How to edit styles across media queries and sizes

Similar Messages

Maybe you are looking for