Skip to main content
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

    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

    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?

    Nancy OShea
    Community Expert
    Community Expert
    February 26, 2017

    Mary+8  wrote

    Now you are beginning to understand where I am at the moment. I think I am running out of steam and in a bad phase!

    I started out as a designer for print but had to learn web site design for my small client base. As I work on my own it there is nobody to share problems with so have to work it out for myself. Hence my use of this forum now that I am beginning to get out of my depth.

    Just when I thought I was getting somewhere I find that my choice of application was unsuitable and my knowledge inadequate!!!

    I know where you're coming from. I too started out as a designer for print many years ago in the late 70's early 80's. Somewhere along the way things took a bit of a nose dive as they usually do and I felt the natural progress was moving into website building. It was still quite young 15 years or so ago when I first took the plunge, Nutscape Navigator 4, Internet Explorer 5 for Mac, GoLIve, table based layout etc those were the days when real skills were needed to make anything work. At a very early stage I realised that I was not going to be satisfied unless I had a real insight into how all this actually worked so I started on a long arduous journey delving deep into the coding that drove a lot of websites, taught myself everything by spending hours unpicking websites I liked, following the people who had the experience in the forum which preceeded this one, testing all their responses and answers religiously etc. I would have been finished 10 years ago (unemployable)  if I had not forced myself down that route.

    So as you can see I have a great passion for getting to the bottom of how things work rather than just sitting back and hoping a bit of software will do it all for me, its given me an extra 10 years and hopfully will see me through, if I keep investing time learning, until the end of my career in  a few years time.

    You should never give up until the time is right and you will always know when that time is.

    Just to add I was back designing some print stuff just the other day....pure bliss. Indesign/Xpress is childs play compared to webdesign. I largely got out of graphic design as I felt it had become an unskilled job. A blindfolded donkey could learn Indesign and Xpress in a couple of hours, I wanted more, some are happy not to be challenged and will never get any further, time will come when they are redundant, excess to requirement, unless they wake up and smell the coffee.

    That is also why I have an intense hatred for frameworks because they lure you into a false sense of security. You dont need to do anything, far from the truth. All frameworks are rubbish, only lazy web developers use them or are forced to use them by others, bosses for financial gain. They really bring nothing to the table in terms of skill or for the good of the developer themselves. They have releatively short shelf lives as new techniques are unveiled constantly. Frameworks can never keep up, they will always be 18 months to 2 years behind by which time everything has moved on again. Any serious web developer would stand on their own 2 feet and watch the trends. Flexbox is becoming big and so will Css Grid in a couple of years time, so invest your time wisely and  look at Flexbox now and start to explore Grid. Thats my advice for anyone who takes web development seriously and see it as a long term career.


    <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

    Nancy O'Shea— Product User & Community Expert