How do I add media queries to an existing css stylesheet?

[Mary_8]

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!

[osgood_ · Accepted solution]

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_8]

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?

[osgood_]

Mary+8  wrote

I have added that code thanks and the test page is here http://www.warfieldpark.co.uk/pages/testing_media_q.html

Where. I cant see the media query added to the page?

[Mary_8]

I added it to the warfield.css file at the bottom as you suggested.

[Nancy OShea]

It works fine for me.  Did you clear your browser's cache?

[Mary_8]

That's odd, it worked when I first added it and uploaded it but now it doesn't.

It works in Dreamweaver when I use the scrubber to change the width of window.

[Mary_8]

Good thinking, I have now cleared the cache.

I still need to know how I can also make it have the same behaviour when the window is viewed on the desktop but dragged to a smaller size.

Can I also change things like font size on smaller devices using code on my css?

In what circumstances would I use the media query option in the css designer and how would I apply that?

[osgood_]

Mary+8  wrote

Good thinking, I have now cleared the cache.

I still need to know how I can also make it have the same behaviour when the window is viewed on the desktop but dragged to a smaller size.

Not sure what you mean. It does work on the desktop if you drag the window to a smaller size?

Plus realistically who is going to drag a desktop browser window below 768px wide, no one except a web-developer.  If they do they are bonkers.

[Mary_8]

osgood_  wrote

Mary+8   wrote

Good thinking, I have now cleared the cache.

I still need to know how I can also make it have the same behaviour when the window is viewed on the desktop but dragged to a smaller size.

Not sure what you mean. It does work on the desktop if you drag the window to a smaller size?

Plus realistically who is going to drag a desktop browser window below 768px wide, no one except a web-developer.  If they do they are bonkers.

Fair point.

OK another question, how can I make sure that the green box containing the text always remains the same size as the image it is describing when viewed on a desktop?

I have tried all sorts of combinations in the css designer but none of them seem to work properly.

[osgood_]

Mary+8  wrote

OK another question, how can I make sure that the green box containing the text always remains the same size as the image it is describing when viewed on a desktop?

Sorry, but I don't understand that question. What I see at the moment is a page which works exactly as you would expect a responsive page should work. When the large images height is reduced to a point where the green box, which overlays it, obscures it too much the green box then repositions beneath the image.

[Mary_8]

osgood_  wrote

Mary+8   wrote

OK another question, how can I make sure that the green box containing the text always remains the same size as the image it is describing when viewed on a desktop?

Sorry, but I don't understand that question. What I see at the moment is a page which works exactly as you would expect a responsive page should work. When the large images height is reduced to a point where the green box, which overlays it, obscures it too much the green box then repositions beneath the image.

My client has sent me images of how it appears on various devices and there is some inconsistency.

Here is it viewed on a desktop with the caption in front of the navigation bar

Here it is viewed on a mobile with the caption still over the photo on one mobile and below it on another.

[Mary_8]

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.

[osgood_]

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.

[pziecina]

osgood_  wrote

I try to avoid it like the plague because I know how shite it is.

You know I don't like explicit language. Please use, (load of)  'excrement' next time

[osgood_]

pziecina  wrote

osgood_   wrote

I try to avoid it like the plague because I know how shite it is.

You know I don't like explicit language. Please use, (load of)  'excrement' next time

Oh yeah forget myself,  well I can't change it now as a post has followed it See what Bootstrap does, it turns me into an unpleasant person.

[Mary_8]

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.

[pziecina]

Mary+8  wrote

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.

I don't think anyone was trying to be offensive.

Instead they were trying to state a point of view. Some users like bootstrap some do not.

I think what was trying to be pointed out is that even though they think bootstrap is not a good solution, using it none the less requires a good working knowledge of html, css and jQuery, which many Dw users think is not required. It is probably more complexed to use than more modern css layout solutions, as even for an experienced developer, understanding the css and html used by bootstrap, is not simple and takes a lot of experience, (for very little benefit, but that is my personal opinion).

Personally I would say that if you are serious about following a web design/development career, then you should start learning about modern css layouts, such as flexbox, others would disagree with using flexbox, and say bootstrap is easier, which just goes to illustrate the differences of opinions. All would agree though that a good knowledge of html5 and modern css is essential.

[osgood_]

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.

[Mary_8]

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.

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!

I just want to give my client a usable web site with some modern features without embarking on a whole new venture.

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

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.

[pziecina]

The target audience for Dw has changed dramatically -

Dw is now aimed at, 'the designer who wants to code'. This means that knowing html and css is essential, and in even though I think it is aimed more at the IE8 era of web sites, I hope  future versions will bring it up to the requirements for the modern web.

Unfortunately, for those who cannot code, this would make using Dw even more difficult.

I don't know how you are learning html/css, but if they do not cover such things as, css 'flexbox', and html 5 'srcset' then look elsewhere.

[osgood_]

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.

[Mary_8]

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!

[osgood_]

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.

[Mary_8]

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!