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?

      M
      Mary_8Author
      Known Participant
      February 26, 2017

      Mary+8  wrote

      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!

      You're looking at it the wrong way. Put a paint brush and hammer in my hands and I would not know what to do with them because I have not invested enough time in how to use them correctly. You are only ever going to be as good as the time you are prepared to invest into learning something. I invest 100's of hours in pointless unpaid exercises just to test my own ability because I want to be the best I can be, others can choose to do that or not. This game is not rocket science its a matter of putting in the hours.

      You've really summned up your attitude and its not good:

      'I don't want to learn to code and never have'

      So good luck with that as you will always struggle but the chances of you doing this job in a year is slim, you'll just move on because you have no real desire to do it and that is the difference between winners and losers.


      I have been running my business for 30 years so there is no doubt of my staying power. But maybe you are right - in a year I might be doing something that appeals to me more!

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