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
  • 5326 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

      How can I get rid of the dark shading on the sides of the carousel image and the chevrons left and right? My client has decided he doesn't want them to show and just wants the white dots to remain as the controls.

      Also how can I position the caption text when the green box is in the vertical position so that it is in the middle of the green box rather than at the top?

      Question for osgood:

      You very kindly gave me css code which made the caption go below the photograph when viewed on a small device.

      I am not a coder (as you will have gathered by now) so I have these questions:

      To view it on a small mobile (iPhone 5 for example) do I need to add another media query or simply change it from max width 768px to something smaller? At the moment the "hamburger" icon on the right disappears on my iPhone 5.

      It seems that older versions of Firefox are the main problem on desktops.


      Mary+8  wrote

      How can I get rid of the dark shading on the sides of the carousel image and the chevrons left and right? My client has decided he doesn't want them to show and just wants the white dots to remain as the controls.

      Detele this section of code:

      <a class="left carousel-control" href="#car_height" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#car_height" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>

      Mary+8  wrote

      Also how can I position the caption text when the green box is in the vertical position so that it is in the middle of the green box rather than at the top?

      As I've stated in this forum on zilliions of occasions Bootstrap is a plie of junk. Unfortunetly people like yourself are led to believe it is the best thing since sliced bread for creating responsive sites. The real truth is its poorly coded uses bloated html and unmanagable  css for all but the experienced coder. You keep using it, as do many others digging yourself into a deeper and deeper hole. That applies to anyone who is not aware that Bootstrap is possibly the worst solution you could choose, especailly when you have no coding skills. Adobe did you no favours, they threw a panic when their much touted but laughable fluid grid solution proved to be an abject failure - they included something in their software - software which is mainly aimed at the code challenged - a solution which is aimed at those with considerable code knowledge. Am I surprised, no - Adobe are completely out of touch, charging a premium price for a poor product in relation to its cost. You know why they can do that because of people like yourself who are 'forced' into buying it.

      Now for the solution. Forget Bootstrap in terms of the captions.

      Change all of your carousel-caption <divs> into carousel-captions (note the 's' on the end)- we will bypass the crap css that Bootstrap forces upon you.

      See below for an example of the new html coding to use for the captions (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)

      NEW CAPTION CODE

      <div class="carousel-captions">

      <div class="caption-vert-center">

      <h4>WARFIELD PARK</h4>

      <p>

      Welcome to Warfield Park, a spacious and well established park home estate that provides unique and diverse living opportunities within its sought after rural landscape.</p>

      </div>

      </div>

      Once you have replaced the 4 captions with the new code then include the below css in your stylesheet.

      .carousel-captions {

      position: absolute;

      top: 0;

      z-index: 1000;

      background-color: #E9FDF9;

      height: 100%;

      width: 250px;

      padding: 0 30px;

      }

      .carousel-captions h4 {

      margin: 0;

      padding: 0 0 15px 0;

      font-size: 20px;

      }

      .carousel-captions p {

      margin: 0;

      padding: 0;

      font-size: 16px;

      }

      .caption-vert-center {

      position: relative;

      top: 50%;

      -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

      transform: translateY(-50%);

      }

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

      .carousel-captions {

      clear: both;

      position: static;

      width: 100%;

      }

      .caption-vert-center {

      position: static;

      top: 0;

      padding: 30px 0;

      -webkit-transform: translateY(-0%);

      -ms-transform: translateY(-0%);

      transform: translateY(-0%);

      }

      }

      As for your question about the hamburger not appearing on your smatphone thats a Bootstrap issue. Maybe someone who actually uses Bootstrap can help you out. I try to avoid it like the plague because I know how shite it is.

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