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
  • 5250 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?

      M
      Mary_8Author
      Known Participant
      February 26, 2017

      Mary+8  wrote

      I am sure that it was not intended to be offensive but it was not what I was expecting on a forum that is aimed at people who use Adobe products.

      I am not starting out on my career, far from it,  but simply trying to keep up to date with current methods. A good many years ago I taught myself GoLive and then moved onto Dreamweaver CS, both of which were pretty simple and aimed at the non-coding end of the market. When my client wanted fancy stuff like carousels etc I assumed that a progression to Dreamweaver CC 2015 would be relatively straightforward.

      That is my point, you haven't moved on very far, if at all. Its even worse than I feared because you mention GoLive, a bit of software that was around years ago, I cut my teeth on that too. I soon realized that you needed to get into code to do anything or produce anything worth while. So while you have been largely going around and around in circles, I have been progressing.

      Mary+8  wrote

      It seems that I have made a big mistake in subscribing to Dreamweaver despite all their hype saying pretty much that it is the best thing they have ever done. However, I am here now and have to make the best of it!

      If you dont want to learn code then Muse may be your way forward. It's of course another learning curve but it seems to me as though you require a drag, point and click approach which Muse is. How good it is and how far you can progress or if it will restrict your progress I dont know.

      Mary+8  wrote

      I have already spent many hours (unpaid) researching problems, asking questions on this forum and trying to get to grips with Dreamweaver.

      Hours is nothing in this profession, learning is ongoing, it takes years and years to become effective and efficient. Sorry but this is not a profession you can learn overnight or in a week or two. It takes hours of dedication and practice if you what to be any where near proficient.

      Mary+8  wrote

      You will have to be prepared for more apparently stupid questions from me I am afraid as I don't know where else to get information.

      That's ok. Nothing personal honestly. I'm more than happy to help. Bootstrap makes be aggressive because its a nasty solution to have to troubleshoot. Even those here that swear by it only usually point you to another resource because they lack any real understanding of how it works when the going gets tuff. They too to a certain extent rely on drag and drop while their only skills diminish.


      I don't want to learn to code and never have. I just wanted the most modern version of something I was familiar with.

      I do wish I had known about Muse sooner but have come down this road so far now that I intend to continue with it.

      I have acquired most of my limited knowledge of coding from researching the various problems I have come up against and working my way through them with the help of some clever people on this forum.

      I think I will have to tell my client that in its basic form Dreamweaver can be used to create a fairly good responsive web site. When it comes to the add-ons and bells and whistles he will have to employ a person with far superior coding skills than I have.

      Having worked so hard to get this far I have to say it is very depressing to realise that my long hard journey has been almost pointless!

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