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?

      O
      osgood_
      Legend
      February 26, 2017

      Thanks for the coding suggestion, I will try to implement it without throwing everything else into disarray.

      The reason I and a good many others use this forum is because we are looking for guidance on how to get around problems with an Adobe product that I, for one, am struggling with.

      Your comment ":

      ..... (I assume you can go into code view and change the 4 instances?  I'm not holding my breath here and probably wasting my time again as it seems I am more often than not, even the simplest bit of coding seems to be beyond the reach of 99% of people in this forum)"....

      very much discourages me from learning by asking questions of people who are better at it than I am.  I guess there must have been a time when you also needed to ask questions to reach your advanced level of knowledge?

      You seem to think that we are all wasting our time using Adobe Dreamweaver at all. Even if this is true it doesn't help me because I have subscribed to Dreamweaver and have built a site using it. In the process I have discovered that there are things it doesn't deal with but my client is still breathing down my neck expecting me to work miracles.


      Mary+8  wrote

      Thanks for the coding suggestion, I will try to implement it without throwing everything else into disarray.

      The reason I and a good many others use this forum is because we are looking for guidance on how to get around problems with an Adobe product that I, for one, am struggling with.

      Your comment ":

      ..... (I assume you can go into code view and change the 4 instances?  I'm not holding my breath here and probably wasting my time again as it seems I am more often than not, even the simplest bit of coding seems to be beyond the reach of 99% of people in this forum)"....

      very much discourages me from learning by asking questions of people who are better at it than I am.  I guess there must have been a time when you also needed to ask questions to reach your advanced level of knowledge?

      You seem to think that we are all wasting our time using Adobe Dreamweaver at all. Even if this is true it doesn't help me because I have subscribed to Dreamweaver and have built a site using it. In the process I have discovered that there are things it doesn't deal with but my client is still breathing down my neck expecting me to work miracles.

      Some people just wont learn no matter what advice they are given. As soon as they have the solution all is forgotten until the next time they hit difficulties. I see it here only too frequently beacuse they put their faith in a program which is only effective in the hands of those that know some coding . I cannot stress enough that you should NOT allow a progamme, DW or any other for that matter, to be the master of what you output. The only way and I'm sorry is to be prepared to put a massive, massive amounts of hours (unpaid mostly) into learning. Those that want to get on will and they will reap the rewards, probably not financially, but in respect of being able to troubleshoot, those that dont will never get on.

      What I dont understand is how you can offer your clients a service. I mean I would regard myself as reasonably good at coding but it challenges me sometimes (a lot of the time) what I'm supposed or asked to do by clients.....so I have zero idea how those with less coding experience can even survive or feel in control.

      I hope my solution will solve at least 2 of your issues. It should do I have tested it.

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