Skip to main content
M
Mary_8
Known Participant
February 19, 2017
Answered

How do I add media queries to an existing css stylesheet?

  • February 19, 2017
  • 1 reply
  • 5259 views

I started learning Dreamweaver CC 2015 about a year ago and have ploughed my way through countless tutorials.

I am a designer not a coder but somehow have managed to create a reasonable-looking test site for my client. He now wants the captions to the carousel on the home page to move below the image on smaller screens so that the image is still visible and the font size changes.

I cannot find the original Adobe tutorial I used to create the site in the first place and am floundering on how to achieve this.

Can I add a media query to my current stylesheet or do I need to make a separate style sheet?

I have looked on line for answers to my problem but they all assume greater knowledge than I have.

Here is the page:

http://http://www.warfieldpark.co.uk/testing.html

Assume I am a complete novice (which I probably still am) and give me step by step instructions if possible please!

      This topic has been closed for replies.
      Correct answer osgood_

      Probably best to hide the pagers (those circles on the images) and arrow indicators as well, otherwise you will probably have to rethink the html structure.

      Css media query which will stack the caption under the images at 768px:

      @media screen and (max-width: 768px) {

      .carousel-caption {

      position: static;

      width: 100%

      }

      .carousel-indicators, .left, .right {

      display: none;

      }

      }

      You can add the media query to the end of your custom css file:

      warfield.css

      1 reply

      O
      osgood_Correct answer
      Legend
      February 19, 2017

      Probably best to hide the pagers (those circles on the images) and arrow indicators as well, otherwise you will probably have to rethink the html structure.

      Css media query which will stack the caption under the images at 768px:

      @media screen and (max-width: 768px) {

      .carousel-caption {

      position: static;

      width: 100%

      }

      .carousel-indicators, .left, .right {

      display: none;

      }

      }

      You can add the media query to the end of your custom css file:

      warfield.css

      M
      Mary_8Author
      Known Participant
      February 19, 2017

      I have added that code thanks and the test page is here http://www.warfieldpark.co.uk/pages/testing_media_q.html

      How can I make it also occur when the window is viewed on a desktop but the window is dragged to a smaller size?

      I have experimented and it doesn't seem to work.

      Is it possible to add other styles to the box and text within the media query code?

      pziecina
      pziecina
      Legend
      February 27, 2017

      https://forums.adobe.com/people/Nancy+OShea  wrote

      <All frameworks are rubbish, only lazy web developers use them...>

      I totally disagree.  Frameworks are nothing more than tools the same as Dreamweaver is a tool.  Tools don't create great products.  People do. 

      All too often people around here think  Dreamweaver  will make them an instant success at web development.  That's like saying an expensive camera + Photoshop/Lightroom will make you an instant Ansel Adams.  It doesn't work that way. 

      You can't produce anything  great until you fully understand the medium and the tools you're working with.   That takes practice, practice, practice.   

      My first Bootstrap project was not an overnight success.  Quite the opposite.  It was born out of many, many focused hours of work with it to see what it could and couldn't do for me.   Once I felt comfortable and competent with it, then I began using it in production.    I certainly would never dive into a new framework & new software on a client project until I understood exactly what I was doing first.  That's the only responsible way to work for people.

      Nancy

      Apart from the disagreeing about frameworks I think youre just echoing what I have been saying, so I'll take that as a compliment, thanks.


      Mary+8​

      Hi Mary, first let me say that if you would like that this discussion stops now, then please let us know, and someone will 'lock' this discussion to prevent further posts.

      Having said that, the reason I and other regular contributors discuss such issues as we are doing now, is because we want to improve Dw and what it offers users such as yourself, and experienced coders also. A lot has been written by none coders in a similar situation to yourself, regarding the lack of options offered by Dw when it comes to modern web development, as code is required to do everything, and I am the first to admit, there is no easy option if you do not wish to learn code.

      I would recommend Adobe Muse, which is probably the best solution for none coders, (though the way it works and the code it produces, I would not have considered as a good solution, except in my worst nightmares) I would say that if you learn html and css, the world, (so to speak) opens up to you when it comes to what is possible in web design and development. Over the years I have tried to get Dw to incorporate a more visual layout system as an option, with much better html5 and css support, plus make its use more intuitive for those like yourself, as I think that once someone is shown what is possible, using good code, that is easy to read and understand, they will become more interested in learning and using code.

      That of course requires making the code produced, simple, yet compliant. A goal which I think would be achieved easier if solutions like Bootstrap were not 'built in' to Dw, but offered as extensions.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices